小编Sam*_*hem的帖子

我已经使用 webpack webworker 加载器有一段时间了。我们现在正在迁移到 Angular 7 并开始使用 typescript。

在遵循许多指南和教程以及这个惊人的问题帖子之后：https : //github.com/webpack-contrib/worker-loader/issues/94#issuecomment-336596520

我不断收到错误，并且没有让工作加载器使用打字稿。

[at-loader] 中的错误....../import/worker/index.ts:4:58 TS2306: 文件“....../import/worker/import.worker.ts”不是模块.

[at-loader] 中的错误......./import/import.component.ts:13:11 TS2304：找不到名称“MyWorkerImport”。

我目前的设置如下：

网络包配置：

module: {
    rules: [
        {
            test: /\.worker\.ts$/,
            use: [
                {
                    loader: 'worker-loader',
                    options: {
                        name: '[name].[hash].js',
                        publicPath: '/'
                    }
                },
                {
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: rootPath + '/tsconfig.json'
                    }
                }
            ]
        }
    ]
}

配置文件

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es6", "dom" ],
        "noImplicitAny": false, …

我正在尝试使用多个域为 webpack-dev-server 设置代理。我们的系统是这样工作的：

• 登录域名.ext
• 项目.域.ext

现在项目在 webpack 开发服务器上运行，而登录是一个 PHP 后端，可以在开发机器上运行。

我设法设置一个代理配置来重定向以在 SSL 上登录并捕获所有返回重定向，以便我可以重新添加端口 8080。

然而，webpack 似乎忽略了域，现在就像将所有内容代理到登录项目一样。

将disableHostCheck 设置为 false 会导致登录域 nog 为有效主机时出现错误。

我在主机名代理上找不到任何内容，我看到的所有配置都是关于路径代理的。但我无法想象自己是唯一一个拥有这样的设置的人。

这是开发服务器配置

import { configPath } from "../vars/paths.config";

const webpackMerge = require('webpack-merge');
const webpack = require('webpack');
import { commonConfig } from './common.config';

const fs = require('fs');

export let developmentConfig;

developmentConfig = {
    devServer: {
        historyApiFallback: true,
        public : 'project.domain.ext.dev1:8080',
        disableHostCheck: true,
        https: {
            key: fs.readFileSync( configPath + '/resources/ssl/san_domain_com.key' ),
            cert: fs.readFileSync( configPath + '/resources/ssl/san_domain_com.crt-extensions' )
        },
        stats: { …

[编辑] 我用这个错误创建了一个演示存储库：https : //github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error

我们已按照说明操作，并且在普通混合动力车上一切正常，但是添加延迟加载失败并出现上述奇怪错误，并且始终按照文档所说的方式实现 ui 路由器（如下面的代码所示）。

加载应用程序时一切正常，但是当点击延迟加载的路线时，我们收到错误

Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: 在AngularJS注入器被设置之前试图获取它。)

我已经尝试过这里列出的解决方案

https://github.com/ui-router/angular-hybrid/issues/93

https://github.com/ui-router/angular-hybrid/issues/150

https://github.com/ui-router/angular-hybrid/issues/395

https://github.com/ui-router/sample-app-angular-hybrid/issues/10

但这些都没有解决它。我们不使用 ng serve 因为它会因随机内存问题而崩溃（可能也是由于混合），我们需要代理到登录页面，但登录页面和我们的项目将在同一端口上运行，这不是可能。所以这需要在后端进行一些重构。

它有时会根据我要去的页面加载一个新的块文件。但大多数情况下我都会遇到这个错误。

有趣的是，在我正在测试的页面中，我们没有使用任何混合代码。基本上我们不再升级任何代码，我们只是降级一些观察者以打开旧页面的模式。

这些是我们正在运行的版本

"@angular/cli": "9.1.7",
"@angular/animations": "9.0.7",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/router": "9.0.7",
"@angular/upgrade": "9.0.7",
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.26",
"@uirouter/core": "6.0.5",
"@uirouter/rx": "0.6.5",

在详细的错误和一些代码下面，不知道还有什么可以分享或我可以安全地分享什么。

关于如何调试的任何建议都会很可爱！

详细错误

stateService.ts?8765:537 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: …

所以我们已经有了一些网络工作者。但为了测试这些，我将它们全部删除，只留了一个，并清空了那个。

我们目前正在从 webpack（使用worker-loader）迁移到 ngserve，我使用 nggenereteweb-worker 创建一个初始的 webworker，调整我们的 tsconfig 并创建一个 tsconfig.worker.json

空的 webworker 中有一个 console.log，并且是根据他们生成的 Angular 演示 webworker 进行设置的。看起来像这样

/// <reference lib="webworker" />\n\naddEventListener('message', (message: any) => console.log(message));\n

工人的进口只是：

let worker = new Worker('./worker/converter.worker', {type: 'module'});\nworker.addEventListener('message', (event: MessageEvent) => this.receiveWorkerMessage(event), false);\n

现在 Angular 和 AngularJs 编译得很好。

在编译过程中，网络工作者如何给出这些错误

ERROR in ./src/app/admin/pages/finance/sovendus-export-converter/worker/converter.worker.ts (./node_modules/worker-plugin/dist/loader.js?name=0!./src/app/admin/pages/finance/sovendus-export-converter/worker/converter.worker.ts)\nModule build failed (from ./node_modules/worker-plugin/dist/loader.js):\n\nError: node_modules/@angular/core/core.d.ts:1540:29 - error TS2304: Cannot find name 'Element'.\n\n1540     constructor(nativeNode: Element);\n                                 ~~~~~~~\nnode_modules/@angular/core/core.d.ts:1541:26 - error TS2304: Cannot find name 'Element'.\n\n1541     get …