Angular: [RC5]: Quebras de pacote minimizadas

Resolvido : o problema é a ordem dos componentes no campo declarations , mas é estranho que isso só aconteça no código agrupado, preciso de feedback antecipado sobre isso durante o desenvolvimento

Experimentou o mesmo problema e começou a trabalhar com a mesma solução.

Não sou, neste momento, particularmente um fã deste novo comportamento :-) e encorajo sinceramente a equipa a documentá-lo no registo de alterações em "alterações significativas".

+1

+1

@antonybudianto Qual ordem você mudou?

@robertoforlani Espero que alguém tenha tempo para escrever uma explicação abrangente em breve. Enquanto isso, aqui está o que posso fazer em alguns minutos.

Para obter uma compilação de "produção" de trabalho livre de avisos e de erros, você precisa editar a definição do módulo de aplicativo NgModule para seu programa, especificamente a matriz de declarações. Essa matriz deve conter uma lista de todos os componentes e diretivas em seu aplicativo.

Agora para a parte mais difícil. Você deve realizar uma "ordenação topológica" desta lista, ou para aqueles que não estudaram ciência da computação formalmente ou recentemente, você precisa reorganizar a ordem desta lista de forma que os componentes fiquem na ordem inversa de uso, com os componentes usados mais "profundamente" em sua hierarquia de componentes, listados primeiro.

Por exemplo, considere se você tinha cinco componentes em seu programa, ABCD E. Se, por exemplo, o componente A usou o componente B em seu modelo, e o componente B usou o componente C em seu modelo e assim por diante, então as dependências entre esses componentes são A -> B, B-> C, C-> D, D-> E, E-> F. Nesse caso, a ordem correta para listá-los nas declarações seria declarations: [E, D, C, B, A] .

Felizmente, na maioria dos aplicativos, não existe um gráfico de dependência tão profundo entre todos os componentes. Em muitos casos, você fará com que esse erro desapareça apenas editando essa lista de declarações para (1) listar todos os seus componentes e (2) listar suas diretivas e componentes pequenos refinados no início, como uma heurística.

Experimentou quase o mesmo problema.

Tenho 2 diretivas (A e B) e 1 componente (C).
se a ordem nas declarações for [A, B, C], obtenho o erro acima para @Input na diretiva B.
se a ordem nas declarações for [B, A, C], obtenho o erro acima para @Input na diretiva A.
A e B não compartilham nenhuma dependência.
C está usando A e B.
Isso acontece apenas para compilação agrupada.
Estou usando o cli versão 1.0.0-beta.10

Obrigado a todos - isso parece um bug. @IgorMinar está investigando.

Estou tendo dificuldade em reproduzir o problema. Alguém pode fornecer uma reprodução?

Eu tentei o repositório do $(npm bin)/gulp serve-build falhou em um http 404 de um teste, uma vez que eu comento a tarefa test gulp, o aplicativo é compilado e executado sem problemas.

Para esclarecer: a ordem das declarações não deve importar. Se mudar a ordem muda o comportamento, então esse é um bug que iremos consertar.

Criei https://github.com/IgorMinar/declarations-bug-repro com cli, mas mesmo esse repo não reproduz o problema.

alguém poderia cloná-lo e modificá-lo para reproduzir o problema? obrigado

Recebi uma reprodução de @kylecordes :

https://github.com/OasisDigital/rc5-declaration-order

Veja os comentários neste arquivo sobre a ordem das declarações. https://github.com/OasisDigital/rc5-declaration-order/blob/master/src/app/app.module.ts

Consegui consertar meu aplicativo.
O problema era que os 2 componentes não estavam usando moduleId: module.id na declaração @Component .
Depois de adicionar moduleId: module.id prod build está ok.

@IgorMinar , desculpe ontem eu
Descobri que meu AppComponent e NavbarComponent são declarados no mesmo módulo (AppModule), então app.html usar o componente navbar, quando agrupado, ele quebra. e tentei transformar o navbar em um módulo que o AppModule importa e resolveu.

Se alguém quiser gerar um aplicativo arbitrariamente grande para ajudar a provar ferramentas (e revelar problemas como este), acabei de atualizar meu "teste de estresse angular2" para rc.5 e NgModule:

https://www.npmjs.com/package/angular2-stress-test

npm install -g angular2-stress-test
cd directory-with-your-components-in-it
angular2-stress-test 500

Eu enfrentei um problema semelhante na versão empacotada para https://sirajc.github.io/angular2-labs/
Tive que adicionar NavbarComponent ao array de bootstrap
bootstrap: [ AppComponent, NavbarComponent ] durante a implantação, enquanto localmente durante o desenvolvimento eu tinha apenas
bootstrap: [ AppComponent]
Eu encontrei esse problema há alguns dias, enquanto trabalhava no branch master, pensei que esse fosse o comportamento pretendido

Eu também tenho esse problema. Alterar a ordem das declarações não resolveu para mim.

@oocx tente colocar moduleId: module.id em cada componente

Corrigido - tive este erro em meus testes de unidade, então tive que corrigir as declarações em minha chamada TestBed.configureTestingModule em vez de meu módulo de aplicativo.

O mesmo problema aqui, resolvido com a opção mangle definida como false.

O mesmo problema aqui, a correção de @gnujeremie resolveu para mim!

return builder.buildStatic('build/src/js/main.js', 'build/app.js', {minify: true, mangle: false});

Mesmo problema, também acontecendo ao usar Angular 2 com JavaScript ES5 (mesmo com a versão normal, não empacotada).

Eu atualizo o repro repo:

https://github.com/OasisDigital/rc5-declaration-order

para o CLI webpack.2 mais recente, para verificar se o problema ainda ocorre ... pois não está claro para mim se este é realmente um problema central ou de alguma forma um problema adicionado pelo webpack ou CLI. Sim, o problema ainda ocorre.

Eu tenho exatamente o mesmo problema desde a atualização para Angular2 RC.5. No RC4 tudo estava funcionando muito bem. O pacote não feio funciona bem. Também feixe feio, mas sem --mangle funciona bem, mas pesa um pouco mais do que com mangle

Existem duas soluções alternativas que também foram mencionadas aqui:

1. reordenar as coisas em declarações - o que realmente nem sempre funciona porque alguns componentes podem usar um ao outro em ambas as maneiras, caso em que essa abordagem não ajudaria. No entanto, como isso ajuda em alguns casos, eu suspeito que o pacote feio coloca as definições de acordo com a ordem nas declarações.
2. uglify sem --mangle que produz um pacote minificado, mas um pouco maior do que seria com mangle, pelo que observei.

Espero que seja resolvido. No RC.4, tudo estava funcionando bem no meu caso, com os mesmos componentes e a mesma versão do uglifyJS.

Angular 2.0.0-rc.5
navegadores-todos
texto datilografado: 1.8.10
uglifyJS: 2.4.10

Eu também experimento esse problema. Minha solução temporária foi desativar a minimização. Esperando por rc.6.

Nota: adicionei moduleId: module.id e piorou as coisas.
O javascript reduzido não está carregando nada, exceto um erro inútil ' home.js: 260 Uncaught TypeError: e.match não é uma função '

Vai tentar adicionar o moduleId de volta, mas usar o NgModule?

Então tente brincar com a ordem das declarações?

Existe uma correção real ou apenas continue tentando até que funcione para mim?

Atualizar:

"SOLUÇÃO": A solução para mim foi remover moduleId: module.id e reorganizar a ordem dos componentes nas declarações com NgModule.

Agora, para descobrir por que ele não está funcionando com moduleId: module.id ?

Atualização II:
Sim, meu tempo acabou ... webpack -p não está gostando nada do moduleId! :( Além disso, parece que nunca? Bleh

Obteve um punkr reproduzível http://plnkr.co/edit/xrFVK1K0OHkKXj1ERYgj?p=preview

Código

import {NgModule, Component, Input} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

var ComponentA = function() {
    @Component({
        selector: 'component-a',
        template: `component-a <component-b [property]="1"></component-b>`
    })
    class Foo {} // <- this class is named Foo
    return Foo;
}();

var ComponentB = function() {
    @Component({
        selector: 'component-b',
        template: 'component-b property: {{ property }}'
    })
    class Foo { // <- And this class is named Foo, rename it to Foo2 and it works
        @Input() property: string;
    }
    return Foo;
}();

@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [
        ComponentA,
        ComponentB,
    ],
    bootstrap: [
        ComponentA,
    ],
})
export class TestModule {}

Erro:

Renomear um dos class Foo para outra coisa resolve o erro.
Eu acho que algo ao longo do pipeline armazena em cache por .name . E os nomes das classes podem colidir se mutilados.

Mesmo aqui. Estou usando o Webpack (https://github.com/AngularClass/angular2-webpack-starter) e as soluções propostas aqui parecem exageradas à primeira vista. Não importa como eu ordene minhas declarações, acabo recebendo o mesmo erro. Além disso, embora eu não chame essas propostas de hacky, elas parecem longe de serem utilizáveis ​​em um aplicativo crítico para os negócios.

Independentemente disso, com todo o respeito pela equipe Angular2, não consigo entender como isso poderia ter chegado ao RC5. Além disso, lançar NgModules neste estágio IMHO parece uma jogada muito controversa.

@thecritic usar um RCx para um aplicativo crítico para os negócios é limítrofe ... Mas isso não é da minha conta ...;)

@ediri @thecritic concordo com @ediri , esse não é o tipo de mudança que deveria aparecer em um RC.

Mesmo aqui. Usando systemjs e systemjsBuilder.
Solução temporária: usei o gulp-uglify para agrupar meus arquivos no final do processo de compilação. Removido este tubo e funciona.
Usar SystemJs sem systemjsBuilder (para dev: mapeado diretamente para a pasta node_modules) não foi problema.

Portanto, parece mais um problema de empacotamento / minimização / feio do que um pedido implícito para mim ... mas veremos

Muitos dizem que "ordenar as declarações na ordem correta resolve o problema".
Mas e os módulos ?? Basta olhar para isto:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

/** FOO MODULE **/

@Component({ selector: 'foo', template: 'I am foo!' })
export class FooComponent { }

@NgModule({ declarations: [FooComponent], exports: [FooComponent] })
export class FooModule { }

/** BAR MODULE **/

@Component({ selector: 'bar', template: 'I am bar!' })
export class BarComponent { }

@NgModule({ declarations: [BarComponent], exports: [BarComponent] })
export class BarModule { }

/** ROOT MODULE **/

@Component({ selector: 'app-root', template: '<foo></foo> <bar></bar>' })
export class AppComponent { }

@NgModule({
  imports: [
    BrowserModule,
    FooModule, // <--- Switching these
    BarModule, // <--- Switching these
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

No exemplo dado, apenas I am foo! impresso.
Se eu mudar FooModule por BarModule em imports então apenas I am bar! aparecerá ..
O que .....? Como devo solicitar a impressão de ambos? :soluço:

A propósito, estou usando angular-cli .

A solução proposta em # 1644 funcionou para mim:

...
mangle: { screw_ie8 : true, keep_fnames: true }, //prod

@ediri Usar um RC na produção é ruim, não há dúvida sobre isso (não estamos fazendo isso btw). O que eu estava tentando enfatizar é que a maioria das pessoas realmente não espera que haja mudanças tão significativas neste estágio e a migração para os novos módulos era obviamente inevitável. Basicamente, ele desmontou tudo para nós (o aplicativo é muito grande neste ponto), refatorar leva tempo e às vezes - como neste caso - refatorar parece quase impossível.

Imagine tudo isso, mas adicionando ngUpgrade no meio: P

Nós gostamos de rock'n'roll! :)

A correção (temporária) de @hansl funciona, a

[Editar] Na verdade, não tenho certeza se isso funciona ...

Tive sucesso total com a abordagem de @sirajc de incluir todas as suas declarações na seção de bootstrap também, contanto que o componente que você realmente deseja inicializar seja o primeiro no array.

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, HomeComponent, FooterComponent],
    bootstrap: [AppComponent, HomeComponent, FooterComponent]
})

Tive algum sucesso brincando com a ordem dos componentes na seção de declarações (obtendo a renderização do componente pai), mas no meu caso eu tinha dois componentes-filhos pares em um componente-pai e com a reordenação, obtive apenas um componente-filho ou a outra renderização .

Nota: este problema ocorre apenas ao minimizar e / ou mutilar / febrilizar.

Graças a @hansl , chegamos ao fundo disso na noite passada.

A geração de código usa Function # name em vários lugares, o que não é um problema com a compilação Ahead of Time (AOT), mas se estivermos no modo JIT e a entrada for um código reduzido, ocorrerão colisões de nomes.

A reordenação de declarações pode fazer com que o problema desapareça, mas ainda pode haver surpresas ocultas com essa abordagem, uma vez que não está realmente resolvendo o problema.

A única correção segura agora é configurar o uglify com mangle: { screw_ie8 : true, keep_fnames: true} ou usar a compilação de modelos AOT.

Estamos procurando uma solução real para o JIT.

https://github.com/angular/angular-cli/pull/1662

Amarrando a solução alternativa angular-cli relevante para rastreamento.

atualização: a correção JIT exigirá mudanças maiores no núcleo, uma vez que não é realmente um problema com o código / design do núcleo, mas com a forma como as classes são transpiladas para funções em várias ferramentas. Consideraremos a implementação de uma solução alternativa no núcleo assim que mais um problema urgente for resolvido. Enquanto isso, use a opção keep_fnames no uglify ou use a compilação AOT do Angular com o ngc.

@IgorMinar Não haverá atualmente um problema de depender da compilação AOT ao usar o ngUpgrade?
ngUpgrade não utiliza o código aot, mesmo se ele existir.

Além desse problema com o ngUpgrade, suspeito que isso será principalmente um "não importa" em um futuro próximo. Assim que a CLI usar o NGC, isso "aumentará o nível". Uma vez que qualquer pessoa aleatória fora da Internet pode lançar um novo projeto em alguns minutos com CLI e ter a pré-compilação de modelo em execução, ninguém usando Angular seriamente a ponto de se preocupar com o modo de produção, será capaz de justificar o não uso de NGC . Outras ferramentas terão que se recuperar muito rapidamente ou serão abandonadas.

Por favor, não perdoem os usuários do ngUpgrade, a equipe Angular promove o ngUpgrade como uma forma de entrar oficialmente no barco do Angular 2 sem fazer uma reescrita completa. E entendo para ser usado na produção também.

Não há projetos de UI completos o suficiente (design de material, ng2-bootstrap, ui-bootstrap) para usar completamente o Angular 2 agora. É o último requisito que tenho para mudar totalmente para o Angular 2. Enquanto isso, tenho que lidar com o ngUpgrade.

Seria fantástico se pudéssemos usar o NGC com o ngUpgrade.

Se, por exemplo, você decidir usar o ngUpgrade como uma etapa para ajudar na migração, mas não usar sua produção, diga-nos agora para levar isso em consideração.

Muito obrigado.

Estou enfrentando o mesmo problema e fui direcionado a esse assunto. Mas estou no Beta 8. Esse problema ainda é aplicável no Beta 8?

@ Ibrahim-Islam você está em um dos betas afetados por um problema de minificação que durou cerca de 10 betas (beta.1 a ~ beta.15 ou mais). Mas não tem nada a ver com esse problema.

+1
Usando uma compilação Webpack (não CLI) como @IgorMinar sugeriu compilar sem reduzir os trabalhos ... assim como os lançamentos beta há vários meses ... Estou feliz por não ter atualizado nosso aplicativo no trabalho na sexta-feira passada ...

Onde você coloca mangle: { screw_ie8 : true, keep_fnames: true} ? Estou tendo problemas para descobrir como reconfigurar o uglify ao usar o angular-cli.

Já mesclamos essa alteração no mestre para a CLI.

@TheLarkInn Acho que @ofuangka estava perguntando: onde isso deve ser colocado _hoje_, para que funcione, em vez de em uma data futura desconhecida quando um novo lançamento CLI for lançado?

(A melhor resposta é provavelmente: em lugar nenhum - em vez disso, use "npm link" para executar com a CLI principal atual em vez da versão lançada.)

@kylecordes Obrigado! Tive a impressão de que a solução poderia ser aplicada por meio da configuração do projeto. Usar o link npm funcionou para mim.

O que significa "NGC" @kylecordes ?

"ngc" é o pré-compilador do template Angular 2 da linha de comando. Ele está no pacote "npm i @ angular / compiler-cli".

@kylecordes obrigado

@ofuangka acabou de definir mangle: false ficará ok

Fwiw, ele funciona perfeitamente no Webpack2 com as opções mangle definidas conforme descrito neste tópico.

Foi sugerido que a solução para este problema é definir mangle = false da seguinte forma:

return builder.buildStatic('build/src/js/main.js', 'build/app.js', {minify: true, mangle: false});

Não estou vendo onde ou como fazer essa mudança. Alguém pode aconselhar?

@nukuuk Tenho uma amostra com o construtor systemjs. Não confirmei se isso corrige, mas você pode tentar aqui: https://github.com/thelgevold/angular-2-samples/blob/master/gulpfile.js

Funciona para definir todas as propriedades como falsas, mas não tentei minify = true e mangle = false

@thelgevold Vejo que você está se referindo ao uso do construtor systemjs com gulp para fazer bundle / minify etc. Sim, eu estava usando isso até recentemente começar a usar o angular-cli com RC5. Tive que definir mangle = false para fazer as compilações funcionarem. Mas de que adianta angular-cli com RC5 se tivermos que recorrer ao construtor gulp / systemjs para agrupar?

@nukuuk você pode descrever exatamente o que você fez? onde exatamente você usou mangle = false ? Estou usando o angular cli 1.0.0-beta.10

@cdarken Atualmente estou usando angular-cli 1.0.0-beta.11-webpack.2 com RC5 (o seguinte pode não ser o caso com angular-cli 1.0.0-beta.10, não sei). E como este tópico relata, se você executar o build -prod, isso irá quebrar o aplicativo porque (presumivelmente)
a) o cli altera o pacote javascript e angular ou webpack não gosta disso, e / ou
b) há algum problema com a ordem dos componentes na declaração do módulo principal.

Não há correção de bug para isso agora, espero que aconteça em breve.

Nesse ínterim, minha solução alternativa envolve a execução de ng build, que agrupará o aplicativo, mas não reduzirá / destruirá os pacotes javascript. Então, estou usando o gulp-uglify com {mangle: false} para concatenar e minificar em um pacote de produção final. Funciona. Mas eu preferiria muito mais que o cli angular concluísse o trabalho.

Hmm, eu tentei reordenar meus componentes menores etc. como primeiros elementos em minhas declarações, nada de charuto, agora começa a reclamar de componentes de material angular que estão em um módulo separado.

Desativei meu plugin Uglify por enquanto, estou usando uma compilação baseada no webpack starter angularclass, se alguém se importar.

@msegers no angularclass-webpack-starter você pode habilitar UglifyJsPlugin nas opções definidas

mangle: { screw_ie8 : true, **keep_fnames: true ** }, //prod

@ofuangka este código é uma configuração para o UglifyJsPlugin em seu arquivo webpack.config.js de produção. Ele deve ser colocado dentro de sua matriz de plug-ins.

plugins: [ new UglifyJsPlugin({ mangle: { screw_ie8 : true, keep_fnames: true } }) ]

: +1:

A solução https://github.com/mishoo/UglifyJS2 (eu estava usando a primeira versão).

Obrigado!

@mikeeus Eu tenho a mesma confusão que @nukuuk sobre onde colocar a configuração "mangle" - porque não há nenhum arquivo "webpack.config.js" (eu fiz um novo "ng new" com angular-cli 1.0.0-beta .11-webpack.2 - RC5).

Então, onde eu crio o arquivo webpack.config.js e preciso modificar o angular-cli.json para usá-lo?

Em anexo está uma captura de tela dos arquivos que tenho com as configurações padrão do angular-cli.json.

Rapazes me corrigem se eu estiver errado, mas acho que você usa a opção mangle quando está feiando o projeto.

@ricklove , acho que você não precisa usar mangle, uma vez que seu projeto não está sendo minimizado / feio

Solução para corrigir "ng serve --prod" com "angular-cli 1.0.0-beta.11-webpack.2 - RC5"

Ok, finalmente descobri uma maneira alterando diretamente o arquivo na pasta node_modules, mas imagino que haja um lugar melhor para fazer isso dentro do meu projeto. Obrigado @mikeeus pela configuração.

@ herlon214 - Funciona bem com a compilação normal, estou tentando fazer uma compilação --prod que é onde tenho um problema.

@rickove agora não estou usando angular-cli para construir para produção (ou seja, não usando ng build -prod) porque, como discutimos aqui, ele quebra o aplicativo. Não consigo encontrar nenhum lugar onde você possa definir as opções de minimização, ou seja, mangle = false.

Por enquanto, estou usando o angular-cli SOMENTE no modo de desenvolvimento (e isso também tem problemas porque o webpack não parece estar produzindo bons mapas de origem, o que está causando estragos na configuração de pontos de interrupção). No caso de eu precisar de um build de produção, estou
1) fazer um build de desenvolvimento (ng build) e então
2) minimizar e concatenar os resultados com gulp-uglify com a opção mangle definida como false
return gulp.src(files) .pipe(concat("main.bundle.min.js")) .pipe(uglify({ mangle: false })) .pipe(gulp.dest("./some/location/js"));

Estou ansioso para a próxima construção em que isso seja corrigido.

UPDATE: Eu não vi @ricklove solução 's acima editar a configuração Webpack ao postar isso. Sua solução alternativa funciona, ignore isso.

@nukuuk , veja minha última postagem, parece estar funcionando para mim para a compilação do produto, pelo menos reduz o tamanho do arquivo em grande medida

Não há nenhuma correção para manter "keep_fnames" desativado? :( aumentou meu arquivo de construção em quase 400kb

A equipe do ng está trabalhando para corrigir isso. Esta é uma solução alternativa para que suas compilações ainda funcionem.

@ herlon214 Muito provavelmente, esta é principalmente uma solução temporária. Tive a impressão no início do tópico de que existe uma solução mais profunda possível que fará com que ela não seja mais necessária. Além disso, aparentemente, já não é necessário se você usar o pré-compilador de modelo ... mas fazer isso é um pouco complicado no momento, há muito pouco por aí em termos de exemplos de trabalho, o suporte de CLI está a caminho, mas não aqui etc.

Por enquanto, o óbvio é apenas acenar com as mãos e fingir que os 400 KB extras não estão lá, porque é temporário. :-)

@ricklove você é um gênio! Funciona, minhas compilações de produção agora são finas e elegantes. Muito Obrigado!

Obrigado pela explicação @TheLarkInn , @kylecordes : smile:

@nukuuk Se 1 MB conta como fino e elegante :) Para ser justo com o gzip, ele reduz o meu para cerca de 250kb, o que na verdade não é ruim para um SPA. Com certeza bate 3 MB com certeza e posso viver com esses resultados por enquanto.

Pessoal, algum de vocês teve algum problema com o gzip? Estou com um pouco de medo de usar gzip e
alguns de meus clientes usam um navegador que não aceita

19/08/2016 12:25 GMT-04: 00 Rick Love [email protected] :

@nukuuk https://github.com/nukuuk Se 1 MB conta como fino e elegante :) Para
seja justo com o gzip, ele reduz o meu para cerca de 250kb, o que na verdade não é
ruim para um SPA. Com certeza bate 3 MB com certeza e posso viver com estes
resultados por enquanto.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/angular/angular/issues/10618#issuecomment -241064821,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ADQtMWZkEuTQR3dzArWU2oMOKVASRu7Yks5qhdjegaJpZM4JgpvN
.

_Att, Herlon Aguiar_

Ei pessoal .. qualquer um que não esteja usando gulp minify e esteja usando o construtor system js tente isso em seu arquivo de configuração gulp .. funcionou para mim:

    builder: {
        normalize: true,
        minify: true,
       // mangle: true, 
        mangle:false,
        runtime: false,
        globalDefs: { DEBUG: false, ENV: 'production' }
    }
};

Estou vendo isso também usando o Webpack e o plug-in 'new webpack.optimize.UglifyJsPlugin ()'. Como @antonybudianto sugeriu, ordenar minhas declarações de módulo topologicamente é uma solução válida por enquanto.

Estou ansioso para ver este consertado!

Tentei reorganizar as declarações, mas não funcionou para mim. Adicionar moduleId: module.id na maioria dos meus componentes funciona como mágica. parabéns para você, senhor.

Ansioso pela correção.

Como algo assim é quebrado e ainda lançado no RC5?

Empacotamento e minificação não são coisas novas, eles são uma parte essencial e fundamental do ecossistema JavaScript. O agrupamento e a minimização no Angular 2 já tiveram muitos problemas antes - mais desculpáveis ​​quando era Alfa ou Beta e talvez nas primeiras vezes que aconteceu.

Certamente o sistema de teste e lançamento deve incluir alguns testes que incluem algum empacotamento e minificação.

Para o ponto de @CaptainCodeman , é preocupante que esse bug tenha chegado tão longe. É claro que entendo que as regressões são inevitáveis, especialmente quando se trabalha em projetos de grande escala que se espera que funcionem com qualquer número de plug-ins e addons desconhecidos do mundo do código aberto. Parabéns à equipe Angular.

Mas, dito isto, haverá algum compilador, bundler e minificador _oficialmente_ suportado (etc) como SystemJS e Webpack que terá um grande conjunto de testes e esforço de desenvolvimento focado neles? Alguém na equipe Angular seria capaz de adicionar uma lista de ferramentas compatíveis com forte suporte em sua documentação? A ideia é que se uma ferramenta estiver listada nos documentos, espera-se que funcione, caso contrário, use por sua própria conta e risco (como é o código aberto).

Obrigado,
Adão

Oi, pessoal,

Só para adicionar uma pequena observação aqui, desativei a opção mangle e todo o UglifyJsPlugin (). Mas ainda quebra os roteadores.

Por exemplo, se eu quiser navegar para localhost:3000/company e tiver um redirecionamento padrão como {path: '', redirectTo: '/company', pathMatch:'full'} , isso funciona, mas se eu tentar navegar diretamente para localhost: 3000 / company url, então eu veja uma página em branco completa ( "Get /company" Error (404): "Not found" ). Nem qualquer outra rota pode ser carregada (as rotas secundárias de / empresa funcionam, mas rotas no mesmo nível). Vou tentar a solução AOT e postar meu comentário aqui mais tarde.

@ShankarSumanth , acho que você pode precisar do HashLocationStrategy no provedor do seu módulo

eu tentei as sugestões no tópico. ainda recebendo:

`Não é possível vincular a 'ícone', pois não é uma propriedade conhecida de 'botão'. ("ver ': pairado,' ui-state-focus ': focus,' ui-state-disabled ': disabled}"

] [icon] = "ícone" pButton * ngIf = "showIcon" (click) = "onButtonClick ($ event, in)"[ngClass] = "): Calendário às 7 : 31; Zona:; Valor: BaseException {mensagem: "Erros de análise de modelo: ↵Não é possível vincular a 'ícone' desde ... em)" ↵ [ngClass] = "): Calendário @ 7 : 31", pilha: "Erro: Erros de análise de modelo: ↵ Não é possível vincular a 'ícone'… odules / zone.js / dist / zone.js? 1472035648186: 365: 38) "} Erro: Erros de análise do modelo:Não é possível vincular a 'ícone', pois não é uma propriedade conhecida de 'botão'.
] [icon] = "ícone" pButton * ngIf = "showIcon" (click) = "onButtonClick ($ event, in)"[ngClass] = "): Calendário às 7 : 31
na nova BaseException (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 5116: 27)
em TemplateParser.parse (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 8318: 23)
em RuntimeCompiler._compileTemplate (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 15941: 55)
em eval (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 15869: 87)
em Set.forEach (nativo)
na compilação (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 15869: 51)
em ZoneDelegate.invoke (http: // localhost: 5555 / node_modules / zone.js / dist / zone.js? 1472035648186: 332: 29)
em Zone.run (http: // localhost: 5555 / node_modules / zone.js / dist / zone.js? 1472035648186: 225: 44)
em http: // localhost : 5555 / node_modules / zone.js / dist / zone.js? 1472035648186: 591: 58
em ZoneDelegate.invokeTask (http: // localhost: 5555 / node_modules / zone.js / dist / zone.js? 1472035648186: 365: 38) consoleError @ zone.js? 1472035648186: 484_loop_1 @ zone.js? 1472035648186: 511drainueMeicro zone .js? 1472035648186: 515ZoneTask.invoke @ zone.js? 1472035648186: 437`

@ahuvafischer Eu tive o mesmo problema, e a única solução funcionou para mim foi listar todos os componentes em @NgModule em app.module. Sempre que adiciono outros módulos B e C e, em seguida, importo B e C para meu app.module ele quebra.

@bahodirk e quanto aos módulos de terceiros?

@ahuvafischer Eu ainda estou
<script src="../node_modules/moment/min/moment-with-locales.min.js"></script>

Com o ES5, se as declarações estiverem na ordem "errada", alguns componentes simplesmente não serão exibidos, sem erros. Plunk: plnkr.co/edit/7qi6Um1UzTXBDrV5q1Js

Se isso não for corrigido para 2.0.0, seria melhor dizer que Angular 2 não oferece suporte a ES5, ponto final.

Não acho que estou minimizando o pacote, mas acabei de atualizar um pequeno projeto para RC5 e estou recebendo os mesmos erros. Atualizei node_modules/@angular/compiler/src/url_resolver.js assim e corrige o erro imediato para mim.

 function _split(uri) {
+    uri += '';
     return uri.match(_splitRe);
 }

O erro era que em um ponto, uri == 114 e não era uma string. Quando adicionei o código acima, ele corrigiu até agora.

OK, agora que estou usando o uglify com mangle: {screw_ie8 : true, keep_fnames: true } definido, não tenho certeza se preciso corrigir node_modules/@angular/compiler/src/url_resolver.js mais ..

ATUALIZAR:

Não, eu ainda preciso dele porque o que está sendo passado como o moduleId ainda é um inteiro 114 e não uma string.
var scheme = url_resolver_1.getUrlScheme(moduleId);

o problema de minimização de nome de função # foi resolvido por 51877ef4ed5016bd0c57f35e7bbb1ee26511ab5d, uma vez que rc.6 for lançado, não será mais necessário dizer ao uglify para não mutilar os nomes das funções.

ainda estou tendo o mesmo problema com angular-2.rc6 com webpack2,
quando usei mangle: false; na configuração do meu webpack
o erro mudou de
t.match is not a function
para
uri.match is not a function
Eu abri um problema no angular2-webpack-starter
https://github.com/AngularClass/angular2-webpack-starter/issues/958

@eslammostafa Esse não é um problema de https://github.com/angular/angular/issues/10626. Basicamente, você pode remover quaisquer referências de module.id do núcleo ou de bibliotecas de terceiros, ou usar um pré-carregador string-replace-loader no webpack que o remove, ou usar o NamedModulesPlugin se estiver usando a versão mais recente do webpack 2 ou manualmente coloque .toString () na parte que causa o erro na pasta node_modules.

@ricklove Obrigado pela sugestão, funcionou perfeitamente para mim.

Para os outros:

nano node_modules/angular-cli/addon/ng2/models/webpack-build-production.ts 

editar mangle: { screw_ie8 : true }, //prod para mangle: { screw_ie8 : true, keep_fnames:true }, //prod

ng build -prod

Aproveitar!

@ricklove Eu atualizei para as versões mais recentes Angular 2.0.0 e Angular CLI 1.0.0-beta.14, mas a abordagem de edição mangle não está funcionando.

O arquivo webpack-build-production.ts está em um local diferente. Agora parece estar na moda;

node_modules/angular-cli/models/webpack-build-production.js

Quando edito este arquivo e o altero para incluir keep_ fnames: true , ainda recebo o erro ...

`Não é possível vincular a 'customerNumber', pois não é uma propriedade conhecida de 'channel-detail-panel'.

1. Se 'channel-detail-panel' for um componente angular e tiver a entrada 'customerNumber', verifique se ele faz parte deste módulo.
2. Se 'channel-detail-panel' for um Web Component, adicione "CUSTOM_ELEMENTS_SCHEMA" em '@ NgModule.schema' deste componente para suprimir essa mensagem.
   ("nnel-detail-panel * ngFor =" permitir canal de channelList.results "
   [ERROR ->] [customerNumber] = "customerNumber"
   [channelModel] = "canal">
   "): ChannelManagementComponent @ 10 : 38`

Eu comparei os dois arquivos main.xxxx.bundle.js com e sem esta solução alternativa e eles são diferentes. Aquele com a solução alternativa tem cerca de 1,47 Mb e aquele sem a alteração tem cerca de 1,32 Mb.

Vejo que esse problema foi resolvido e "incluído" na versão 2.0.1 do Angular, mas não consigo dizer o que foi realmente alterado.

Também tentei várias combinações diferentes com a ordem das declarações, mas continuo recebendo o problema.

Quais versões de Angular e Angular CLI as pessoas usam nas quais a abordagem de edição mangle funciona?

Qualquer ajuda seria muito apreciada :-)

[Atualização] - Acabei de ver o comentário de @IgorMinar sobre o 51877ef corrigir esse problema no rc.6, mas estou usando a versão 2.0.0 e ainda parece ser um problema.

[RESOLVIDO] - Ack, minha culpa. Acho que meu problema real era que minha declaração de seletor no subcomponente "channel-detail-panel" não estava certa, foi definida como "app-channel-detail-panel" quando deveria ser apenas "channel-detail- painel "- então o erro estava certo, mas não explicando as coisas muito bem.

Acho que esse problema está funcionando corretamente agora no Angular 2.0.0 + Angular CLI 1.0.0-beta.14 sem a solução alternativa para edição e mangle. Apenas certifique-se de que suas declarações de seletor estejam corretas.

Vendo o mesmo problema. Estou usando a introdução do webpack que está no angular.io. Ele funciona bem quando integrado no modo dev, no entanto, quando integrado no modo prod, o processo uglify parece interrompê-lo. Eu tentei embaralhar a ordem das declarações no meu módulo de app conforme sugerido acima, e agora estou vendo erros relacionados aos componentes Angular construídos (veja abaixo), então embaralhar a ordem das declarações não resolve isso.

Estou perplexo com esses tipos de erros e espero que a equipe Angular esteja atenta a esses tipos de mudanças, já que é fácil perder várias horas com esses tipos de erros. Todas as sugestões são apreciadas. Obrigado!

Não é possível vincular a 'routerlink', pois não é uma propriedade conhecida de 'a'. ("ab of item.Tabs" style = "background-color: # d3d3d3; border: 1px solid #fff; padding: 5px 5px 5px 5px"> ] [routerlink] = tab.Link * ngif = "tab.IsRoute == = true "> {{tab.Text}} AppNav @ 0 : 193
Não é possível vincular a 'ngif', pois não é uma propriedade conhecida de 'a'.

@mchamo O seu * ngIf não está escrito errado? Não é * ngif - é * ngIf com I maiúsculo.

Olá @rperfect , como descrevi em meu post acima, tudo funciona bem ao executar o processo de compilação do aplicativo no modo dev. Além disso, minha mensagem de erro original ao executar no modo de construção de produção era idêntica aos erros no início deste tópico. Depois de embaralhar a ordem das declarações, incluindo a alteração da declaração AppComponent, conforme sugerido por algumas das outras postagens neste tópico, comecei a ver o problema do ngIf. Voltando à minha lista de declaração original, estou de volta à mensagem de erro original. A causa raiz do problema parece ser o processo de uglify com a construção do pacote da web. Voltando para a versão não feia, ou seja, dev build, tudo funciona bem. No entanto, o tamanho da página é de cerca de 2 MB, daí a necessidade de minimizá-la.

@mchamo você provavelmente tem htmlLoader, certifique-se de configurá-lo assim:

      {
        test: /\.html$/,
        loader: 'html',
        options: {
          minimize: true,
          removeAttributeQuotes: false,
          caseSensitive: true, // <- this
          customAttrSurround: [
            [/#/, /(?:)/],
            [/\*/, /(?:)/],
            [/\[?\(?/, /(?:)/]
          ],
          customAttrAssign: [/\)?\]?=/]
        }
      },

@princemaple obrigado pela sugestão, ainda recebendo a mensagem de erro original (veja abaixo) ao executar após compilar para o modo prod. Construir no modo dev, funciona bem.

zone.js? fad3: 355Unhandled Rejeição da promessa: Erros de análise do modelo:
Não é possível vincular a 'appname', pois não é uma propriedade conhecida de 'app-nav'.

1. Se 'app-nav' for um componente Angular e tiver a entrada 'appname', verifique se ele faz parte deste módulo.
2. Se 'app-nav' for um componente da Web, adicione "CUSTOM_ELEMENTS_SCHEMA" em '@ NgModule.schema' deste componente para suprimir essa mensagem.

@mchamo, a única coisa que você precisa é:

new webpack.optimize.UglifyJsPlugin({
  mangle: {
    keep_fnames: true
  },
})

@ Martin-Wegner você está correto, isso é tudo que é necessário, e estava na documentação de introdução do webpack do Angular.io. Resolvi meu problema na noite passada.

Para todos os outros, encontrei esse problema porque estava fazendo referência aos arquivos js compilados / minimizados que o webpack coloca na pasta dist para pollyfills, vendor e app de meu index.html original (fora da pasta dist). Eu estava fazendo isso porque já havia configurado meu site no IIS, roteamento e reescrita de URL do IIS para usar meu index.html original. Isso funcionou bem para a construção do dev webpack, mas não para a construção do prod.

Para fazer isso funcionar, eu precisei confiar no index.html que o webpack cria na pasta dist. Portanto, tive que atualizar minhas configurações de IIS, configurações de reescrita de URL e roteamento para usar o arquivo dist / index.html. Feito isso, então, tudo funciona bem e nenhum erro é gerado com a compilação de produto do webpack.

Eu tive o mesmo problema no mais novo Angular2 v2.0.2 no DEV. O motivo disso é que meu componente não foi declarado em app.module, mas queria usar as dependências de app.module. Movê-lo para o módulo de nível superior corrigiu o problema.

Estou usando o angular 2 em um aplicativo aspnet core ... o que significa que a publicação no aws envolve o visual studio ... o que significa que estou usando o executor de tarefas do Visual Studio para executar o webpack ... o que significa que estou bloqueado em "webpack -p" como o comando para compilações de produto ... o que significa que UglifyJsPlugin é executado com as configurações padrão e não tenho o luxo de passar parâmetros como keep_fnames: true.
Existe alguma outra maneira de contornar isso?

@jrood você deve ser capaz de definir essa configuração em seu arquivo de configuração webpack.prod.

@machmo infelizmente, mesmo se eu adicionar explicitamente "new webpack.optimize.UglifyJsPlugin ({mangle: {keep_fnames: true}})" à lista de plug-ins, ele é substituído por aquele sem parâmetros gerados pelo sinalizador -p.

Acontece que meu problema foi realmente causado por webpack.optimize.OccurrenceOrderPlugin (webpack -h diz que -p só faz --optimize-minimize, mas a documentação online confirma que também faz --optimize-occur-order);

Estou tendo o mesmo problema, embora já tenha incluído o seguinte código no webpack.config conforme descrito em angular.io

new webpack.optimize.UglifyJsPlugin({
  mangle: {
    keep_fnames: true
  },
})

Meu projeto usando ASP.NET MVC 4 e Angular 2 está usando um dos muitos aplicativos de página única que temos atualmente.

O erro que estou enfrentando agora é durante o processo de uglify, o ngModel está se tornando ngmodel (minúsculas)

zone.js: 388Unhandled Promise rejeição: Erros de análise de modelo:
Não é possível vincular a 'ngmodel', pois não é uma propriedade conhecida de 'input'. ("olumn-main-map>

@ 0 : 313
Não é possível vincular a 'ngif', pois não é uma propriedade conhecida de 'div'. ("$ event) /> Mostrar tráfego

@ trungk18 Acho que você também deve configurar seu html-loader. Experimente isto:

htmlLoader: {
        minimize: false // workaround for ng2
}

Esta solução alternativa é a partir da configuração de produção do Webpack nos documentos do Angular .

@ tasos-ale verifique se há htmlmin ou qualquer outro carregador. Parece atributos em letras minúsculas em arquivos html

           {
                test: /\.html/,
                loader: 'html-loader',
                options: {
                    minimize: true,
                    removeAttributeQuotes: false,
                    caseSensitive: true,
                    customAttrSurround: [
                        [/#/, /(?:)/],
                        [/\*/, /(?:)/],
                        [/\[?\(?/, /(?:)/]
                    ],
                    customAttrAssign: [/\)?\]?=/]
                }
            }

Isso parece funcionar para mim.

Parece que html-loader pré-processar algumas opções caseSensitive: true é uma opção necessária
https://github.com/webpack/html-loader/blob/master/index.js#L99

Isso ocorre porque eu não uso plug-ins que processam as opções do usuário, se não houver, eu escrevi

Este problema parece estar de volta para mim. Observe, eu atualizei para Typescript 2.0.10 e Angular 2.4.0. A compilação de desenvolvimento do web-pack funciona bem, mas a compilação de produto do web-pack resulta em erro. Novamente, parece estar relacionado à distinção entre maiúsculas e minúsculas, portanto, se eu tiver uma propriedade chamada appName em meu componente, após a compilação de prod, o Angular está procurando por appname, que não existe e, portanto, resulta no erro. Todas as sugestões são apreciadas.

Aqui está meu webpack.prod.js.

var webpack = require ('webpack');
var webpackMerge = require ('webpack-merge');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');
var commonConfig = require ('./ webpack.common.js');
var helpers = require ('./ helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'produção';

module.exports = webpackMerge (commonConfig, {
devtool: 'mapa-fonte',

output: {
    path: helpers.root('dist'),
    publicPath: '/Applications/MyApp/dist',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
},

plugins: [
  new webpack.LoaderOptionsPlugin({
      htmlLoader: {
          minimize: false // workaround for ng2
      }
  }),

  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
          keep_fnames: true
          //,
          //minimize: true
      }
  }),
  new ExtractTextPlugin('[name].[hash].css'),
  new webpack.DefinePlugin({
      'process.env': {
          'ENV': JSON.stringify(ENV)
      }
  })      
]

});

@miladchamo qual versão wbepack você usa?

@ Martin-Wegner Estou usando o pacote abaixo para web. Isso é baseado na documentação do webpack

"webpack": "2.2.1",
"webpack-dev-server": "2.4.1",
"webpack-merge": "^3.0.0"

Não tive problemas com esta versão ...

Mas devo usar:

    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),

    new webpack.LoaderOptionsPlugin({
      test: /\.html$/,
      options: {
        htmlLoader: {
          minimize: false // workaround for ng2
        }
      }
    }),

    new webpack.NoEmitOnErrorsPlugin(),

    new webpack.optimize.UglifyJsPlugin({
      // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      },
      sourceMap: true
    })

@ Martin-Wegner que não parece funcionar. Mesmo erro mencionado antes.

@miladchamo você tem algum projeto GitHub que mostra o problema?

@ Martin-Wegner Eu fiz isso funcionar. Tive que atualizar o package.json, para ter certeza de ter atualizado as versões para todas as dependências dev. Além disso, tive que alterar essa dependência para 2.5.41, para que a compilação do lado do cliente funcione, conforme mencionado em https://github.com/angular/angular.io/issues/3198

• "@ types / jasmine": "^ 2.5.35",
• "@ types / jasmine": "2.5.41",

Obrigado por sua ajuda ao longo do caminho. Dito isso, ainda estou preocupado em saber como as versões secundárias nessas dependências têm um impacto tão significativo, e parece que o angular.io docs para webpack e angular https://angular.io/docs/ts/latest/guide /webpack.html não estão sendo mantidos totalmente atualizados ou não estão sendo totalmente testados. Esta é a segunda vez que me deparo com um problema ao segui-los.

Meu código funciona perfeitamente no ambiente de desenvolvimento quando tento npm run build, recebo o seguinte erro:

ERRO em ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit": 0, "remove": true}! ./ node_modules / css-loader! ./ node_modules / sass-loader / lib / loader.js! ./ src / app / communication-center / comm-center
.component.scss
A construção do módulo falhou:
.all-common-grid {
^
CSS inválido após "e": esperado 1 seletor ou na regra, era "exports = module.ex"
em D: devGreater_GivingCommunicationCentersrcappcommunication-centercomm-center.component.scss (linha 1, coluna 1)
@ ./src/app/communication-center/comm-center.component.scss 2: 21-317
@ ./src/app/communication-center/comm-center.component.ts
@ ./src/app/communication-center/comm-center.module.ts
@ ./src/app/app-routing.module.ts
@ ./src/app/app.module.ts
@ ./src/app/main.ts

ERRO em ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit": 0, "remove": true}! ./ node_modules / css-loader! ./ node_modules / sass-loader / lib / loader.js! ./ src / assets / style.scss
A construção do módulo falhou:
/ * Folha de estilo importada * /
^
CSS inválido após "e": esperado 1 seletor ou na regra, era "exports = module.ex"
em D: devGreater_GivingCommunicationCentersrcassetsstyle.scss (linha 1, coluna 1)
@ ./src/assets/style.scss 2: 21-286

A seguir está o meu código

webpack.config.common.js

var HtmlWebpackPlugin = require ('html-webpack-plugin');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');
var CopyWebpackPlugin = require ('copy-webpack-plugin');
var helpers = require ('./ helpers');
var webpack = require ('webpack');

module.exports = {
entrada: {
'app': './src/app/main.ts',
'polyfills': './src/polyfills.ts',
'estilos': './src/assets/style.scss'
},
resolver: {
extensões: ['.ts', '.js']
},
módulo: {
as regras: [
{
teste: /.ts$/,
usar: [
{
loader: 'awesome-typescript-loader',
opções: {
transpileOnly: true
}
},
{loader: 'angular2-template-loader'},
{loader: 'angular-router-loader'}
]
},
{
teste: /.html$/,
carregadores: ['html-loader']
},
{
teste: /.scss$/,
excluir: [/ node_modules /, helpers.root ('src', 'style.scss')],
use: ['to-string-loader', 'css-loader', 'sass-loader']
},
{
teste: /.scss$/,
use: ExtractTextPlugin.extract ({
use: 'css-loader! sass-loader'
})
},
{
teste: /.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
use: 'file-loader? name = assets / [name]. [hash]. [ext]'
}
],
exprContextCritical: false
},
plugins: [
new ExtractTextPlugin ({// define onde salvar o arquivo
nome do arquivo: 'estilos / [nome] .bundle.css',
allChunks: verdadeiro,
}),
new HtmlWebpackPlugin ({
modelo: 'src / index.html'
}),
new CopyWebpackPlugin ([
{
from: 'node_modules / froala-editor / css /',
para: 'assets / froala-editor / css /',
},
{
de: 'node_modules / font-awesome / css / font-awesome.min.css',
para: 'assets / font-awesome / css / font-awesome.min.css',
},
{
from: 'node_modules / font-awesome / fonts',
para: 'assets / font-awesome / fonts'
}
]),
new webpack.ProvidePlugin ({
$: "jquery",
jQuery: "jquery"
})
]
};

webpack.config.prod.js
var path = require ('path');
var webpack = require ('webpack');
var webpackMerge = require ('webpack-merge');
var commonConfig = require ('./ webpack.config.common');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');
var UglifyJSPlugin = require ('uglifyjs-webpack-plugin');

const ENV = process.env.NODE_ENV = process.env.ENV = 'produção';

module.exports = webpackMerge (commonConfig, {
saída: {
caminho: path.resolve (__ dirname, 'dist'),
publicPath: '/',
nome do arquivo: '[nome]. [hash] .js',
chunkFilename: '[id]. [hash] .chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin (),
new webpack.optimize.UglifyJsPlugin ({
mangle: {
keep_fnames: true
}
}),
novo ExtractTextPlugin ('styles. [hash] .css'),
new webpack.DefinePlugin ({
'process.env': {
'ENV': JSON.stringify (ENV)
}
}),
new webpack.LoaderOptionsPlugin ({
opções: {
htmlLoader: {
minimize: false // solução alternativa para ng2
}
}
}),
novo UglifyJSPlugin ()
]
});

@Maseeharazzack

Estou tendo esse mesmo problema no 7.0.2

Ok, então eu tive o mesmo problema ao usar, por exemplo, 'import {TooltipModule} de' ngx-bootstrap / tooltip ';' no meu app.module. Então, meu problema era que eu não estava incluindo este módulo no arquivo ts.spec para o componente sobre o qual o erro estava falando. Depois de adicioná-lo ao arquivo ts.spec como uma importação, o phantom começou a entender o que é o módulo de dica de ferramenta. Espero que isto ajude.

Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se você estiver encontrando um problema semelhante ou relacionado.

Leia mais sobre nossa política de bloqueio automático de conversas .

_{_Esta ação foi executada automaticamente por um bot._}