【问题标题】:Error running Angular 5 SPA in Visual Studio 2017在 Visual Studio 2017 中运行 Angular 5 SPA 时出错
【发布时间】:2018-09-01 00:52:51
【问题描述】:

当我尝试使用 .net core 2 运行引用 Angular 5 的 SPA 时,我收到以下错误消息;

An unhandled exception occurred while processing the request.
NodeInvocationException: StaticInjectorError(e)[s -> i]: 
StaticInjectorError(Platform: core)[s -> i -> InjectionToken DocumentToken]: 
Right-hand side of 'instanceof' is not an object
TypeError: StaticInjectorError(e)[s -> i]: 
StaticInjectorError(Platform: core)[s -> i -> InjectionToken DocumentToken]: 
Right-hand side of 'instanceof' is not an object
at bt (C:\....\ClientApp\dist\main-server.js:92:81462)
at vt (C:\....\ClientApp\dist\main-server.js:92:81337)
at nn (C:\....\ClientApp\dist\main-server.js:92:104108)
at nn (C:\....\ClientApp\dist\main-server.js:92:104227)
at rn (C:\....\ClientApp\dist\main-server.js:92:103904)
at Ce (C:\....\ClientApp\dist\main-server.js:92:77511)
at We.insertToken (C:\....\ClientApp\dist\main-server.js:92:80723)
at C:\....\ClientApp\dist\main-server.js:92:84001
at Rt (C:\....\ClientApp\dist\main-server.js:92:84016)
at Qe (C:\....\ClientApp\dist\main-server.js:92:78997)

谁能指出这是什么意思,我已经尝试在互联网上寻找解决方案,但没有成功。

我的packages.json文件如下;

   {
      "name": "Services.Public",
      "version": "0.0.0",
      "license": "MIT",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "^5.0.0",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/router": "^5.0.0",
        "bootstrap": "4.0.0",
        "core-js": "^2.5.3",
        "jquery": "3.2.1",
        "popper.js": "1.14.1",
        "rxjs": "^5.5.2",
        "zone.js": "^0.8.20"
      },
      "devDependencies": {
        "@angular/cli": "^1.6.3",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@angular/platform-server": "^5.0.0",
        "@angular-devkit/core": "^0.4.6",
        "@ngtools/webpack": "^1.10.2",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "@types/webpack-env": "1.13.5",
        "angular2-router-loader": "0.3.5",
        "angular2-template-loader": "0.6.2",
        "aspnet-prerendering": "^3.0.1",
        "aspnet-webpack": "^2.0.3",
        "awesome-typescript-loader": "4.0.1",
        "codelyzer": "^4.0.1",
        "extract-text-webpack-plugin": "v4.0.0-alpha.0",
        "es6-shim": "0.35.3",
        "event-source-polyfill": "0.0.9",
        "html-loader": "0.4.5",
        "html-webpack-plugin": "^3.0.7",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "^1.7.1",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "^1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "to-string-loader": "1.1.5",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "^2.7.2",
        "webpack": "^4.2.0",
        "webpack-addons": "^1.1.5",
        "webpack-cli": "^2.0.12",
        "webpack-hot-middleware": "2.21.2",
        "webpack-merge": "4.1.2"
      }
    }

我从运行webpack --config ./webpack.config.vendor.js 得到的输出是;

    Hash: b39fc415a48442d6bfc65aba8dd7f82786abce7b
    Version: webpack 4.2.0
    Child
        Hash: b39fc415a48442d6bfc6
        Time: 15305ms
        Built at: 2018-3-22 14:08:33
             Asset      Size  Chunks                    Chunk Names
         vendor.js  1.12 MiB       0  [emitted]  [big]  vendor
        vendor.css   174 KiB       0  [emitted]         vendor
        Entrypoint vendor [big] = vendor.js vendor.css

        WARNING in ./node_modules/@angular/core/esm5/core.js
        6558:15-36 Critical dependency: the request of a dependency is an expression
         @ ./node_modules/@angular/core/esm5/core.js
         @ dll vendor

        WARNING in ./node_modules/@angular/core/esm5/core.js
        6578:15-102 Critical dependency: the request of a dependency is an expression
         @ ./node_modules/@angular/core/esm5/core.js
         @ dll vendor

        WARNING in ./node_modules/@angular/core/esm5/core.js
        System.import() is deprecated and will be removed soon. Use import() instead.
        For more info visit https://webpack.js.org/guides/code-splitting/
         @ dll vendor 6558:15-36

        WARNING in ./node_modules/@angular/core/esm5/core.js
        System.import() is deprecated and will be removed soon. Use import() instead.
        For more info visit https://webpack.js.org/guides/code-splitting/
         @ dll vendor 6578:15-102

        WARNING in configuration
        The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 

        WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
        This can impact web performance.
        Assets: 
          vendor.js (1.12 MiB)

        WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
        Entrypoints:
          vendor (1.29 MiB)
              vendor.js
              vendor.css


        WARNING in webpack performance recommendations: 
        You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
        For more info visit https://webpack.js.org/guides/code-splitting/
        Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/bootstrap/dist/css/bootstrap.css:
            Entrypoint undefined = extract-text-webpack-plugin-output-filename
    Child
        Hash: 5aba8dd7f82786abce7b
        Time: 20483ms
        Built at: 2018-3-22 14:08:38
            Asset      Size  Chunks             Chunk Names
        vendor.js  1.27 MiB       0  [emitted]  vendor
        Entrypoint vendor = vendor.js

        WARNING in ./node_modules/@angular/core/bundles/core.umd.js
        System.import() is deprecated and will be removed soon. Use import() instead.
        For more info visit https://webpack.js.org/guides/code-splitting/
         @ dll vendor 6596:15-36

        WARNING in ./node_modules/@angular/core/bundles/core.umd.js
        System.import() is deprecated and will be removed soon. Use import() instead.
        For more info visit https://webpack.js.org/guides/code-splitting/
         @ dll vendor 6616:15-102

        WARNING in configuration
        The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 

So only warnings, and the output of running the `webpack` command is;

    webpack : (node:7008) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    At line:1 char:1
    + webpack
    + ~~~~~~~
        + CategoryInfo          : NotSpecified: ((node:7008) Dep....hooks` instead:String) [], RemoteException
        + FullyQualifiedErrorId : NativeCommandError

    Hash: 58a796a24931610be875f5c7580494b98900c7b1
    Version: webpack 4.2.0
    Child
        Hash: 58a796a24931610be875
        Time: 8565ms
        Built at: 2018-3-22 14:10:02
                     Asset      Size  Chunks             Chunk Names
            main-client.js    28 KiB       0  [emitted]  main-client
        main-client.js.map  99.8 KiB       0  [emitted]  main-client
        Entrypoint main-client = main-client.js main-client.js.map

        WARNING in configuration
        The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 
    Child
        Hash: f5c7580494b98900c7b1
        Time: 8333ms
        Built at: 2018-3-22 14:10:02
                 Asset      Size  Chunks             Chunk Names
        main-server.js  2.73 MiB       0  [emitted]  main-server
        Entrypoint main-server = main-server.js

        WARNING in configuration
        The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 

我已尝试清理缓存并重新安装所有模块,但均未成功。 提前感谢您,我们将不胜感激。

【问题讨论】:

    标签: node.js angular visual-studio webpack


    【解决方案1】:

    您是否在 Setup.cs 文件中使用了UseWebpackDevMiddleware()

    我最近遇到了这个问题,它似乎与使用该配置有关。尝试将其注释掉,看看会发生什么。

    UseWebpackDevMiddleware()aspnet-webpack 上运行,该aspnet-webpack 尚未更新为与 Webpack 4 兼容。您需要推迟使用它,直到它更新为止。

    【讨论】:

    • 确实是因为我运行的是 webpack 4 和 aspnet-webpack 不兼容。我没有尝试过您的解决方案,因为我设法弄清楚发生了什么。最后我回到了 webpack 3
    • 仅供参考,即使在我认为应该与 webpack 4 兼容的 aspnet-webpack v3.0.0 上我仍然看到这个问题。
    猜你喜欢
    • 2019-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-04
    • 2018-07-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多