at-loader checking finished with 273 errors

[deKaantje]

Hi!

Your angular-library-seed sounds very promising, but unfortunately after unzipping, 'npm install' and 'npm start' I got the message that at-loader had 273 errors. It resulted in a console log fully colored red.

Some of the errors (the rest looks the same, but in different files);
ERROR in [at-loader] ./node_modules/@types/jasmine/index.d.ts:40:52 TS1005: '=' expected.

ERROR in [at-loader] ./node_modules/@angular/common/src/pipes/async_pipe.d.ts:44:38 TS2304: Cannot find name 'Promise'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:350:48 TS2304: Cannot find name 'PropertyKey'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:1320:43 TS2339: Property 'toPrimitive' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/@types/lodash/index.d.ts:5630:44 TS2503: Cannot find namespace '_'.

Details:
npm v 4.1.2
node v 6.9.5

What am I doing wrong?

Thanks in advance!!

[arlowhite]

I get the same thing. Node v6.10.1

[arlowhite]

I got past the errors, but there are still many warnings with npm test

update packages:

"codelyzer": "~2.1.1",
"tslint": "^4.5.1",
"tslint-loader": "^3.4.3",
"typedoc": "^0.5.1",
"typescript": "~2.2.2",

Add to tsconfig.json and tsconfig-build.json
"lib": ["es2015", "dom"]

I think the package versions in this project need to be reviewed.

[deKaantje]

I Agree..

I got the entire thing working again. No errors anymore. What I did:

NPM
These versions worked for me:

{
"dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "3.4.10",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/core-js": "^0.9.0",
    "@types/jasmine": "2.5.46",
    "@types/jquery": "^2.0.41",
    "@types/node": "7.0.8",
    "@types/selenium-webdriver": "2.53.33",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^6.3.2",
    "awesome-typescript-loader": "^3.0.0-beta.17",
    "codelyzer": "^3.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.8.1",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^2.4.0",
    "json-loader": "^0.5.3",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.3",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "node-sass": "^3.4.2",
    "null-loader": "0.1.1",
    "postcss-loader": "^1.1.0",
    "protractor": "^4.0.10",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.4",
    "rimraf": "^2.5.1",
    "sass-loader": "^4.0.0",
    "shelljs": "^0.7.0",
    "style-loader": "^0.13.0",
    "ts-helpers": "1.1.2",
    "ts-lint": "^4.5.1",
    "tslint": "^4.0.0",
    "tslint-loader": "3.4.3",
    "typedoc": "^0.5.1",
    "typescript": "2.2.1",
    "url-loader": "^0.5.6",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-server": "2.1.0-beta.9"
  }
}

tsconfig
Also I had to add the line Arlowhite mentioned in tsconfig.json:

{
"compilerOptions": {
    "target": "ES5",
    "lib": ["es6", "dom"],
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true
  }
}

package.json scripts
I also saw that in publishing mode in the package.json (packagepublish.json) there are no scripts. I assume the 'build' script from the dev json should be in here.

tslint
It seems the settings for tslint are also outdated with the npm packages. I used the follwoing config:

{
    "extends": "tslint:recommended",
    "rulesDirectory": [
        "node_modules/codelyzer"
    ],
    "rules": {
        "callable-types": true,
        "class-name": true,
        "comment-format": [
            true,
            "check-space"
        ],
        "curly": true,
        "eofline": true,
        "forin": true,
        "import-blacklist": [
            true,
            "rxjs"
        ],
        "import-spacing": true,
        "indent": [
            true,
            "spaces"
        ],
        "interface-over-type-literal": false,
        "label-position": true,        
        "max-line-length": [
            true,
            200
        ],
        "member-access": true,
        "member-ordering": [
            true,
            "static-before-instance",
            "variables-before-functions"
        ],
        "no-arg": true,
        "no-bitwise": true,
        "no-console": [
            true,
            "debug",
            "info",
            "log",
            "time",
            "timeEnd",
            "trace"
        ],
        "no-construct": true,
        "no-debugger": true,        
        "no-duplicate-variable": true,
        "no-empty": false,
        "no-empty-interface": true,
        "no-eval": true,        
        "no-shadowed-variable": true,
        "no-string-literal": false,
        "no-string-throw": true,
        "no-switch-case-fall-through": true,
        "no-trailing-whitespace": false,
        "no-unused-expression": true,
        "no-unused-variable": true,
        "no-use-before-declare": true,
        "no-var-keyword": true,
        "no-var-requires": false,
        "object-literal-sort-keys": false,
        "ordered-imports": [
            false
        ],
        "one-line": [
            true,
            "check-open-brace",
            "check-catch",
            "check-else",
            "check-whitespace"
        ],
        "quotemark": [
            true,
            "single",
            "avoid-escape"
        ],
        "radix": true,
        "semicolon": [
            "always"
        ],
        "trailing-comma": [
            true,
            {
                "singleline": "never",
                "multiline": "never"
            }
        ],
        "triple-equals": [
            true,
            "allow-null-check"
        ],
        "typedef-whitespace": [
            true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "typeof-compare": true,
        "unified-signatures": true,
        "variable-name": [
            true,
            "ban-keywords"
        ],
        "whitespace": [
            true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ],
        "directive-selector": [
            true,
            "attribute",
            ["app"],
            "kebab-case"
        ],
        "component-selector": [
            true,
            "element",
            ["app"],
            "kebab-case"
        ],        
        "only-arrow-functions": [
            true,
            "allow-declarations",
            "allow-named-functions"
        ],  
        "use-input-property-decorator": true,
        "use-output-property-decorator": true,
        "use-host-property-decorator": true,
        "no-input-rename": false,
        "no-output-rename": false,        
        "use-pipe-transform-interface": true,
        "component-class-suffix": true,
        "directive-class-suffix": true,        
        "pipe-naming": [
            true,
            "camelCase"
        ]
    }
}

tsconfig-build
I also tweaked the tsconfig-build.json:

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["es6", "dom"],
    "module": "commonjs",
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true
  },
  "files": [
    "./src/entry-file-for-my-component.ts"
  ],
  "exclude": [
    "node_modules",
    "bundles"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  }
}

watch the 'files' property. this should point to your entry file with all imports/exports that start of webpack

That should do it. If not: let me know!

[ocombe]

Could you make a PR for fix these errors please? That'd be nice!

[deKaantje]

I will, but I found 1 more issue when importing the resulting component/library into another Angular-cli project. It seems to have to do with AoT compiling;

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

I think this is caused by the transpilation of .ts files to the resulting .js files. When outputting and using the original .ts files in my other project it does not complain.

I would like to fix this first..