Installation with angular-seed not working

I’m getting the error:

(SystemJS) XHR error (404 Not Found) loading http://localhost:5556/node_modules/ng2-ckeditor.js

I’m referencing the module in my SharedModule where other modules are imported.

import { CKEditorModule } from 'ng2-ckeditor';

In my project.config.ts file, I have this set:

this.APP_ASSETS = [
  ...this.APP_ASSETS,
  { src: `${this.CSS_SRC}/font-awesome/css/font-awesome.min.css`, inject: true, vendor: false },
  { src: '//cdn.ckeditor.com/4.5.11/full/ckeditor.js', inject: true, vendor: false }
];

In my seed.config.ts file, I have this:

  SYSTEM_CONFIG_DEV: any = {
    defaultJSExtensions: true,
    paths: {
      [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
      '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
      '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
      '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
      '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',

      '@angular/common/testing': 'node_modules/@angular/common/bundles/common-testing.umd.js',
      '@angular/compiler/testing': 'node_modules/@angular/compiler/bundles/compiler-testing.umd.js',
      '@angular/core/testing': 'node_modules/@angular/core/bundles/core-testing.umd.js',
      '@angular/http/testing': 'node_modules/@angular/http/bundles/http-testing.umd.js',
      '@angular/platform-browser/testing': 'node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
      '@angular/platform-browser-dynamic/testing': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
      '@angular/router/testing': 'node_modules/@angular/router/bundles/router-testing.umd.js',
      'ng2-ckeditor': 'node_modules/ng2-ckeditor',
      'primeng': 'node_modules/primeng',
      'app/*': '/app/*',
      // For test config
      'dist/dev/*': '/base/dist/dev/*',
      '*': 'node_modules/*'
    },
    packages: {
    }
  };
 

SYSTEM_BUILDER_CONFIG: any = {
    defaultJSExtensions: true,
    base: this.PROJECT_ROOT,
    packageConfigPaths: [
      join('node_modules', '*', 'package.json'),
      join('node_modules', '@angular', '*', 'package.json')
    ],
    paths: {
      // Note that for multiple apps this configuration need to be updated
      // You will have to include entries for each individual application in
      // `src/client`.
      [join(this.TMP_DIR, this.BOOTSTRAP_DIR, '*')]: `${this.TMP_DIR}/${this.BOOTSTRAP_DIR}/*`,
      'dist/tmp/node_modules/*': 'dist/tmp/node_modules/*',
      'node_modules/*': 'node_modules/*',
      '*': 'node_modules/*'
    },
    packages: {
      '@angular/common': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/compiler': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/core/testing': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/core': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/forms': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/http': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/platform-browser': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/platform-browser-dynamic': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      '@angular/router': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      'rxjs': {
        main: 'Rx.js',
        defaultExtension: 'js'
      },
      'ng2-ckeditor': {
        main: 'lib/index.js',
        defaultExtension: 'js',
      },
      'primeng': {
        main: './primeng.js',
        defaultExtension: 'js'
      }
    }
  };  

Any help is appreciated.

[gauravsoni119]

Hi @brightonhall , Either you need to give path to ckeditor.js in index.html as <script>https://cdn.ckeditor.com/4.5.11/full/ckeditor.js</script> or you need to download ckeditor from http://ckeditor.com/download and then add to project.config.ts inside this.APP_ASSETS as following:- { src: ${this.ASSETS_SRC}/ckeditor/ckeditor.js, inject: true, vendor: false } Also you need to place ckeditor inside asssets folder.

[ghost]

@gauravsoni119 - I did try this and it didn’t work, but I think I know why now. See below.

@KillerCodeMonkey - your #1 item helped, but I didn’t need the ‘format’ property, I needed more (see below). Also I like this seed project because it does a lot for me, like build for dev, build for prod, and bundle and minify all files into a small distributable. Something it would take me lots of manual work to preform, something I don’t want to do. :^)

@tonychangcheng - it was your suggestion of adding the ckeditor/ckeditor.js into the project.config.ts file. This is what I was missing. I thought it was enough to just add the ng2-ckeditor to the config, and I was wrong.

Thank you to everyone, it is now working perfectly with no errors.