我的库模块无法识别为NgModule

Question

My AccordionModule in my angular 2 library seems to be not a NgModule during the first compilation by angular-cli but he reload again alone after the error and then he can compile and the module is recognize.

  Time: 7903ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 11.4 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.6 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

    ERROR in AccordionModule is not an NgModule
    webpack: Failed to compile.
    webpack: Compiling...
    Hash: 422f957171e71c80b1cf                                                         
    Time: 1999ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 11.4 kB {3} [initial]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.6 MB [initial]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
    webpack: Compiled successfully.

I tried to upgrade typescript to the version 2.0.10 and ̀ 2.0.3 but that change nothing.

Here is my dependencies :

 "peerDependencies": {
        "@angular/common": "^2.4.0",
        "@angular/compiler": "^2.4.0",
        "@angular/core": "^2.4.0",
        "@angular/platform-browser": "^2.4.0",
        "core-js": "2.4.1",
        "typescript": "2.0.10",
        "zone.js": "^0.7.6"
    },
    "devDependencies": {
        "@angular/compiler-cli": "^2.4.0",
        "@angular/platform-server": "^2.4.0",
        "@types/jasmine": "2.5.38",
        "@types/node": "6.0.60",
        "rimraf": "^2.5.4"
    }

And my tsconfig :

{
    "compilerOptions": {
        "baseUrl": "",
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "declaration": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "skipLibCheck": true,
        "stripInternal": true,
        "typeRoots": ["./node_modules/@types"],
        "types": [
            "node"
        ],
        "lib": [
            "dom",
            "es2015"
        ],
        "paths": {
            "@angular/core": ["node_modules/@angular/core"]
        }
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "exclude": [
        "node_modules",
        "dist",
        "tests",
        "**/*.ngfactory.ts",
        "**/*.shim.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "dist",
        "entryModule": "src/lib/module#AccordionModule",
        "skipTemplateCodegen": true,
        "strictMetadataEmit": true
    }
}

Answer 1

Compile your package in AOT using the ngc compiler instead of the tsc compiler. You can point it to the same tsconfig file.

npm install @angular/compiler-cli @angular/platform-server --save
node_modules/.bin/ngc -p tsconfig-aot.json

//Windows users should surround the ngc command in double quotes:
"node_modules/.bin/ngc" -p tsconfig.json

More details on this article https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile

The ngc compiler will output extra metadata that Angular uses to recognize your module.