Angular: [RC5]: فواصل الحزم المصغرة

حل: المشكلة هي ترتيب العناصر في declarations المجال، لكنه غريب أنه يحدث فقط في رمز واحدة، ولست بحاجة ردود الفعل المبكرة على أنه عندما في التنمية

واجهت نفس المشكلة ونهضت وعمل بنفس الحل.

حتى هذه اللحظة ، لست معجبًا بشكل خاص بهذا السلوك الجديد :-) وأشجع الفريق بشدة على توثيقه في سجل التغيير ضمن "كسر التغييرات".

+1

+1

antonybudianto ما هو الترتيب الذي قمت بتغييره؟

robertoforlani آمل أن يكون لدى شخص ما الوقت لكتابة شرح شامل قريبًا. في غضون ذلك ، إليك ما يمكنني فعله في غضون دقيقتين.

من أجل الحصول على بنية "إنتاج" خالية من التحذيرات وخالية من الأخطاء ، تحتاج إلى تعديل تعريف وحدة التطبيق NgModule لبرنامجك ، وتحديدًا مصفوفة الإعلانات. يجب أن تحتوي هذه المصفوفة على قائمة بجميع المكونات والتوجيهات في تطبيقك.

الآن للجزء الأصعب. يجب إجراء "نوع طوبولوجي" من هذه القائمة ، أو بالنسبة لأولئك الذين لم يدرسوا علوم الكمبيوتر رسميًا أو مؤخرًا ، فأنت بحاجة إلى إعادة ترتيب هذه القائمة بحيث تكون المكونات بترتيب عكسي للاستخدام ، مع المكونات المستخدمة الأكثر "بعمق" في التسلسل الهرمي للمكونات ، المدرجة أولاً.

على سبيل المثال ، ضع في اعتبارك ما إذا كان لديك خمسة مكونات في برنامجك ، ABCD E. ، على سبيل المثال ، إذا استخدم المكون A المكون B في قالبه ، والمكون B استخدم المكون C في قالبه ، وما إلى ذلك ، فإن التبعيات بين هذه المكونات هي A -> B ، B-> C ، C-> D ، D-> E ، E-> F. في هذه الحالة سيكون الترتيب الصحيح لإدراجها في التصريحات هو declarations: [E, D, C, B, A] .

لحسن الحظ ، في معظم التطبيقات لا يوجد مثل هذا الرسم البياني العميق للتبعية بين جميع المكونات. في كثير من الحالات ، ستعمل على إزالة هذا الخطأ فقط عن طريق تحرير قائمة الإعلانات هذه إلى (1) سرد جميع المكونات الخاصة بك ، و (2) سرد توجيهاتك والمكونات الصغيرة الدقيقة في البداية ، كإرشاد.

واجهت نفس المشكلة تقريبا.

لدي توجيهان (A و B) ومكون واحد (C).
إذا كان ترتيب الإعلانات هو [A ، B ، C] ، فسأحصل على الخطأ أعلاه لـ
إذا كان ترتيب التعريفات هو [B ، A ، C] ، فسأحصل على الخطأ أعلاه لـ
لا يشترك "أ" و "ب" في أي تبعيات.
يستخدم C كلا من A و B.
يحدث هذا فقط للبناء المجمع.
أنا أستخدم إصدار cli 1.0.0-beta.10

شكرا لكم جميعا - هذا يبدو وكأنه خطأ. IgorMinar تحقق.

أواجه صعوبة في إعادة إنتاج المشكلة. هل يمكن لشخص ما تقديم توبيخ؟

لقد جربت الريبو الخاص بـ antonybudianto ولكن فشل $(npm bin)/gulp serve-build في http 404 من الاختبار ، بمجرد أن أقوم بالتعليق على مهمة اختبار gulp ، يتم إنشاء التطبيق وتشغيله دون أي مشاكل.

للتوضيح: ترتيب الإعلانات لا يجب أن يكون مهما. إذا أدى تغيير الترتيب إلى تغيير السلوك ، فهذا خطأ سنقوم بإصلاحه.

لقد أنشأت https://github.com/IgorMinar/declarations-bug-repro باستخدام cli ولكن حتى هذا الريبو لا يعيد حل المشكلة.

هل يمكن لأي شخص استنساخه وتعديله لإعادة معالجة المشكلة؟ شكرا

حصلت على نسخة من kylecordes :

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

انظر التعليقات في هذا الملف حول ترتيب التصريحات. https://github.com/OasisDigital/rc5-declaration-order/blob/master/src/app/app.module.ts

تمكنت من إصلاح طلبي.
تكمن المشكلة في أن المكوّنين لا يستخدمان moduleId: module.id في إعلان Component .
بمجرد إضافة moduleId: module.id prod build على ما يرام.

IgorMinar ، آسف بالأمس لقد دفعت بعض الالتزامات إلى الفرع ، يجب أن يعمل كما هو متوقع.
تم الإعلان عن AppComponent و NavbarComponent الخاص بي على نفس الوحدة (AppModule) ، ثم app.html استخدم مكون navbar ، عند تجميعه ، ينكسر. وحاولت تحويل navbar إلى وحدة نمطية نفسها تستوردها AppModule ، وقد تم حلها.

إذا أراد أي شخص إنشاء تطبيق كبير بشكل تعسفي للمساعدة في إثبات الأدوات (والكشف عن مشكلات مثل هذه) ، فقد قمت للتو بتحديث "اختبار الإجهاد الزاوي 2" الخاص بي لـ rc.5 و 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

لقد واجهت مشكلة مماثلة في الإصدار المجمع لـ https://sirajc.github.io/angular2-labs/
اضطررت إلى إضافة NavbarComponent إلى مجموعة bootstrap
bootstrap: [ AppComponent, NavbarComponent ] أثناء النشر ، بينما كان لدي فقط أثناء التطوير محليًا
bootstrap: [ AppComponent]
لقد واجهت هذه المشكلة منذ بضعة أيام أثناء العمل في الفرع الرئيسي ، اعتقدت أن هذا هو السلوك المقصود

أنا أيضا لدي هذه المشكلة. لم يؤد تغيير ترتيب الإقرارات إلى إصلاحه بالنسبة لي.

oocx حاول وضع moduleId: module.id في كل مكون

تم إصلاحه - كان لدي هذا الخطأ في اختبارات الوحدة الخاصة بي ، لذلك اضطررت إلى إصلاح الإعلانات في مكالمة TestBed.configureTestingModule الخاصة بي بدلاً من وحدة التطبيق الخاصة بي.

نفس المشكلة هنا ، تم حلها مع تعيين خيار mangle على false.

نفس المشكلة هنا حل الإصلاح من gnujeremie بالنسبة لي!

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

نفس المشكلة ، تحدث أيضًا عند استخدام Angular 2 مع JavaScript ES5 (حتى مع الإصدار العادي ، غير مجمّع).

أقوم بتحديث الريبو:

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

إلى أحدث CLI webpack.2 ، للتحقق من استمرار حدوث المشكلة ... لأنه ليس من الواضح بالنسبة لي ما إذا كانت هذه مشكلة أساسية حقًا ، أو بطريقة ما مشكلة تمت إضافتها بواسطة webpack أو CLI. نعم ، ما زالت المشكلة تحدث.

لدي نفس المشكلة تمامًا منذ التحديث إلى Angular2 RC.5. في RC4 كان كل شيء يعمل بشكل جيد للغاية. حزمة غير uglified تعمل بشكل جيد. كما أن الحزمة المقبوحة ولكن بدون --mangle تعمل بشكل جيد ولكنها تزن أكثر قليلاً مما لو كانت مع التشابك

هناك نوعان من الحلول التي تم ذكرها هنا أيضًا:

1. إعادة ترتيب الأشياء في الإعلانات - وهو أمر لا يعمل دائمًا لأن بعض المكونات قد تستخدم بعضها البعض في كلا الاتجاهين وفي هذه الحالة لن يساعد هذا النهج. ومع ذلك ، لأن هذا يساعد في بعض الحالات ، فأنا أشك في أن الحزمة المقذوفة تضع تعريفات وفقًا لترتيب الإعلانات.
2. uglify بدون - mangle الذي ينتج حزمة مصغرة ولكن أكبر قليلاً مما سيكون عليه مع mangle مما لاحظته.

آمل أن يتم حلها. في RC.4 كان كل شيء يعمل بشكل جيد في حالتي بنفس المكونات ونفس إصدار uglifyJS.

الزاوي 2.0.0-rc.5
المتصفحات للجميع
مطبوعة: 1.8.10
uglifyJS: 2.4.10

أنا أيضا أواجه هذه المشكلة. كان الحل المؤقت الخاص بي هو تعطيل التصغير. في انتظار rc.6.

ملاحظة: لقد أضفت moduleId: module.id وزاد الأمر سوءًا.
جافا سكريبت المصغر لا يقوم بتحميل أي شيء باستثناء الخطأ غير المجدي " home.js: 260 خطأ في

هل ستحاول إضافة moduleId مرة أخرى ولكن استخدام NgModule؟

ثم حاول اللعب بترتيب التصريحات؟

هل هناك حل حقيقي أو استمر في المحاولة حتى يعمل معي؟

تحديث:

"الحل": كان الحل بالنسبة لي هو إزالة moduleId: module.id وإعادة ترتيب المكونات في الإعلانات باستخدام NgModule.

الآن لمعرفة سبب عدم عملها مع moduleId: module.id ؟

التحديث الثاني:
ياه ، لقد انتهى وقتي ليومهم ... إن حزمة الويب webpack -p لا تروق للوحدة على الإطلاق! :( علاوة على ذلك ، يبدو أنه لم يسبق له مثيل

حصلت على punkr قابل للتكرار http://plnkr.co/edit/xrFVK1K0OHkKXj1ERYgj؟p=preview

الشفرة

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 {}

خطأ:

تؤدي إعادة تسمية أحد class Foo إلى شيء آخر إلى حل الخطأ.
أعتقد أن شيئًا ما على طول خط الأنابيب يخزن بمقدار .name . ويمكن أن تتصادم أسماء الفئات إذا كانت مشوهة.

كذلك هنا. أنا أستخدم Webpack (https://github.com/AngularClass/angular2-webpack-starter) والحلول المقترحة هنا تبدو مبالغة للغاية للوهلة الأولى. بغض النظر عن الطريقة التي أطلب بها إقراراتي ، ينتهي بي الأمر بالحصول على نفس الخطأ. أيضًا ، على الرغم من أنني لا أسمي هذه المقترحات متطرفة ، إلا أنها تبدو بعيدة عن كونها قابلة للاستخدام في تطبيق مهم للأعمال.

بغض النظر ، مع كل الاحترام الواجب لفريق Angular2 ، لا يمكنني أن أتمكن من تحويله إلى RC5. أيضًا ، يبدو طرح NgModules في هذه المرحلة IMHO خطوة مثيرة للجدل للغاية.

thecritic باستخدام RCx لتطبيق مهم للأعمال هو الحد الفاصل ... لكن هذا ليس من أعمالي ... ؛)

edirithecritic أنا لا أتفق معediri، وهذا ليس نوع من التغييرات من المفترض أن تظهر في RC.

كذلك هنا. استخدام systemjs و systemjsBuilder.
الحل المؤقت: لقد استخدمت gulp-uglify لتجميع ملفاتي في نهاية عملية الإنشاء. تمت إزالة هذا الأنبوب ويعمل.
باستخدام SystemJs بدون systemjsBuilder (للمطور: تم تعيينه مباشرة إلى مجلد node_modules) لم يكن هناك مشكلة.

لذلك فهي تبحث عن مشكلة تجميع / تصغير / تقويض أكثر من مجرد أمر ضمني ... لكننا سنرى

كثرة القول إن "ترتيب الإعلانات بالترتيب الصحيح يحل المشكلة".
ولكن ماذا عن الوحدات ؟؟ فقط انظر إلى هذا:

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 { }

في المثال الموضح ، تمت طباعة I am foo! .
إذا قمت بتغيير FooModule بـ BarModule في imports عندها يظهر I am bar! ..
ماذا .....؟ كيف أطلب طباعة كل منهما؟ :تنهد:

راجع للشغل أنا أستخدم angular-cli .

الحل المقترح في # 1644 نجح معي:

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

ediri يعد استخدام RC في الإنتاج

تخيل كل هذا ولكن إضافة ngUpgrade في المنتصف: P

نحن نحب موسيقى الروك أند رول! :)

الإصلاح (المؤقت) بواسطة hansl يعمل بالمناسبة ، أنا سعيد!

[تحرير] في الواقع ، لست متأكدًا تمامًا مما إذا كان ذلك يعمل ...

لقد حققت نجاحًا كاملاً مع أسلوبsirajc في تضمين جميع

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

لقد حققت بعض النجاح في اللعب بترتيب المكونات في قسم الإعلانات (الحصول على عرض المكون الرئيسي) ، ولكن في حالتي كان لدي مكونان فرعيان من نظير في مكون رئيسي ومع إعادة الترتيب حصلت على مكون فرعي واحد فقط أو عرض آخر .

ملاحظة: تحدث هذه المشكلة فقط عند التصغير و / أو التشويه / التقبيل.

بفضل hansl ، وصلنا إلى الجزء السفلي من هذه الليلة الماضية.

يستخدم إنشاء الكود اسم الوظيفة # في عدة أماكن ، وهي ليست مشكلة في تجميع Ahead of Time (AOT) ، ولكن إذا كنا في وضع JIT وكان الإدخال مصغرًا في الكود ، فسيحدث تضارب في الاسم.

قد تؤدي إعادة ترتيب الإعلانات إلى اختفاء المشكلة ، ولكن لا تزال هناك مفاجآت خفية مع هذا النهج لأنه لا يحل المشكلة حقًا.

الحل الوحيد الآمن الآن هو تكوين uglify باستخدام mangle: { screw_ie8 : true, keep_fnames: true} أو استخدام تجميع قالب AOT.

نحن نبحث في إصلاح فعلي لـ JIT.

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

ربط الحل الزاوي ذي الصلة بالتتبع.

التحديث: سيتطلب إصلاح JIT تغييرات أكبر في جوهره لأنه لا يمثل مشكلة في الكود / التصميم الأساسي ، ولكن مع كيفية تحويل الفئات إلى وظائف في أدوات مختلفة. سننظر في تنفيذ حل بديل في جوهر الأمر بمجرد حل المشكلة الأكثر إلحاحًا. في غضون ذلك ، يرجى استخدام الخيار keep_fnames في uglify أو استخدام تجميع AOT في Angular مع ngc.

IgorMinar ألن تكون هناك حاليًا مشكلة تعتمد على تجميع AOT عند استخدام ngUpgrade؟
لا تستخدم ngUpgrade كود aot حتى لو كان موجودًا.

بصرف النظر عن هذه المشكلة مع ngUpgrade ، أعتقد أن هذا سيكون في الغالب "لا يهم على الإطلاق" في المستقبل القريب. بمجرد أن يستخدم CLI NGC ، فإن ذلك سوف "يرفع المستوى". بمجرد أن يتمكن أي شخص عشوائي خارج الإنترنت من إطلاق مشروع جديد في بضع دقائق باستخدام CLI وتشغيل التجميع المسبق للقالب ، لن يتمكن أي شخص يستخدم Angular بجدية إلى النقطة التي يهتم بها لوضع الإنتاج ، من تبرير عدم استخدام NGC . سيتعين على الأدوات الأخرى اللحاق بالركب بسرعة كبيرة أو التخلي عنها.

من فضلك ، لا تغفر لمستخدمي ngUpgrade ، يقوم فريق Angular بالترويج لـ ngUpgrade كطريقة للقفز رسميًا على قارب Angular 2 دون القيام بإعادة كتابة كاملة. وأنا أفهم أنه سيتم استخدامها في الإنتاج أيضًا.

لا توجد ميزات كافية لمشاريع واجهة المستخدم الكاملة (تصميم متعدد الأبعاد ، ng2-bootstrap ، ui-bootstrap) لاستخدام Angular 2 بالكامل في الوقت الحالي. إنه الشرط الأخير الذي يجب أن أتحرك فيه بالكامل نحو Angular 2. وفي هذه الأثناء يجب أن أتعامل مع ngUpgrade.

سيكون من الرائع لو تمكنا من استخدام NGC مع ngUpgrade.

إذا قررت على سبيل المثال استخدام ngUpgrade كخطوة للمساعدة في الترحيل ولكنك لا تستخدمه في الإنتاج ، فيرجى إخبارنا الآن بأخذ ذلك في الاعتبار.

شكرا جزيلا.

أواجه نفس المشكلة وقد تم توجيهي لهذه المشكلة. لكنني في الإصدار التجريبي 8. هل ما زالت هذه المشكلة قابلة للتطبيق في الإصدار التجريبي 8؟

@ Ibrahim-Islam ، أنت تستخدم أحد الإصدارات التجريبية المتأثرة بمشكلة تصغير استمرت لمدة 10 تجريبية (بيتا من 1 إلى ~ 15 بيتا أو نحو ذلك). لا علاقة له بهذه المشكلة بالرغم من ذلك.

+1
باستخدام Webpack build (وليس CLI) حيث اقترح IgorMinar البناء بدون تصغير الأعمال ... تمامًا مثل الإصدارات التجريبية قبل عدة أشهر ... يسعدني أنني لم أقم بترقية تطبيقنا في العمل يوم الجمعة الماضي .....

أين تضع mangle: { screw_ie8 : true, keep_fnames: true} ؟ أواجه مشكلة في معرفة كيفية إعادة تكوين uglify عند استخدام angular-cli.

لقد دمجنا بالفعل هذا التغيير في Master لـ CLI.

TheLarkInn أعتقد أن ofuangka كان يسأل: أين يجب وضع هذا _today_ ، لجعله يعمل ، بدلاً من تاريخ مستقبلي غير معروف عندما يتم إطلاق سفن CLI جديدة؟

(ربما تكون أفضل إجابة هي: لا مكان - بدلاً من ذلك ، استخدم "npm link" للتشغيل باستخدام CLI الرئيسي الحالي بدلاً من الإصدار الذي تم إصداره.)

@ kylecordes شكرا! كان لدي انطباع بأن الحل يمكن تطبيقه من خلال تكوين المشروع. استخدام رابط npm يعمل بالنسبة لي.

Whatchu يعني "NGC" kylecordes ؟

"ngc" هو مترجم مسبق للقالب Angular 2 لسطر الأوامر. إنه موجود في الحزمة "npm i @ angular / compiler-cli".

kylecordes شكرا لك

ofuangka مجرد وضع : الكاذبة ستكون على ما يرام

Fwiw ، إنه يعمل بشكل مثالي في Webpack2 مع تعيين خيارات mangle كما هو موضح في هذا الموضوع.

لقد تم اقتراح أن حل هذه المشكلة هو ضبط mangle = false كما يلي:

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

لا أرى أين أو كيف أجري هذا التغيير. يمكن لأي شخص أن ينصح؟

nukuuk لدي عينة مع باني systemjs. لم أؤكد أن هذا يعمل على إصلاحه ، ولكن يمكنك تجربته هنا: https://github.com/thelgevold/angular-2-samples/blob/master/gulpfile.js

يعمل على تعيين جميع الخصائص على false ، لكنني لم أحاول minify = true و mangle = false

thelgevold أرى ، أنت تشير إلى استخدام مُنشئ systemjs مع gulp لعمل حزمة / تصغير إلخ. نعم كنت أستخدم هذا حتى بدأت مؤخرًا في استخدام angular-cli مع RC5. اضطررت إلى ضبط mangle = false لجعل البنيات تعمل. ولكن ما هو الهدف من الزاوية الزاوية مع RC5 إذا كان علينا الرجوع إلى أداة إنشاء gulp / systemjs لتجميعها؟

nukuuk هل يمكنك وصف ما فعلته بالضبط؟ أين بالضبط استخدمت mangle = false ؟ أنا أستخدم angular cli 1.0.0-beta.10

cdarken حاليًا أستخدم angular-cli 1.0.0-beta.11-webpack.2 مع RC5 (قد لا يكون ما يلي هو الحال مع angular-cli 1.0.0-beta.10 ، لا أعرف). ونظرًا لتقارير سلسلة الرسائل هذه ، إذا قمت بتشغيل تعطيل التطبيق لأنه (على الأرجح)
أ) cli mangles حزمة جافا سكريبت والزاوية أو webpack لا تعجبه ، و / أو
ب) توجد مشكلة في ترتيب المكونات في إعلان الوحدة الرئيسية.

لا يوجد إصلاح خطأ لهذا الآن ، ونأمل أن يحدث قريبًا.

في الوقت الحالي ، يتضمن الحل الخاص بي تشغيل ng build الذي سيجمع التطبيق ولكن لا يصغر / يفسد حزم جافا سكريبت. ثم أستخدم gulp-uglify مع {mangle: false} للتسلسل والتصغير في حزمة الإنتاج النهائية. إنها تعمل. لكنني أفضل كثيرًا إذا أنهى cli الزاوي المهمة.

حسنًا ، لقد حاولت إعادة ترتيب مكوناتي الأصغر وما إلى ذلك كعناصر أولية في تصريحاتي ، فلا يوجد سيجار يبدأ الآن في الشكوى من مكونات مادة الزاوية الموجودة في وحدة منفصلة.

لقد قمت بتعطيل المكون الإضافي Uglify في الوقت الحالي ، فأنا أستخدم تصميمًا يعتمد على برنامج angularclass webpack starter إذا كان أي شخص يهتم.

msegers في angularclass-webpack-starter يمكنك تمكين UglifyJsPlugin في مجموعة الخيارات

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

ofuangka هذا الكود هو إعداد لـ UglifyJsPlugin في ملف webpack.config.js الخاص بالإنتاج. يجب وضعها داخل مجموعة الإضافات الخاصة بك.

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

: +1:

حل mikeeus يعمل بشكل جيد بالنسبة لي! لكنني كنت بحاجة إلى الانتقال إلى https://github.com/mishoo/UglifyJS2 (كنت أستخدم الإصدار الأول).

شكرا!

mikeeus لدي نفس الارتباك مثل nukuuk مع مكان وضع إعداد "mangle" - لأنه لا يوجد ملف "webpack.config.js" (قمت بعمل "ng new" جديد باستخدام angular-cli 1.0.0-beta .11-webpack.2 - RC5).

إذن ، أين يمكنني إنشاء ملف webpack.config.js وهل أحتاج إلى تعديل angular-cli.json لاستخدامه؟

مرفق لقطة شاشة للملفات التي أمتلكها باستخدام إعدادات angular-cli.json الافتراضية.

يصحح لي الرجال إذا كنت مخطئًا ولكني أعتقد أنك تستخدم خيار التشوه عندما تقبح المشروع.

ricklove ، أعتقد أنه ليس عليك استخدام mangle ، بمجرد أن لا يتم تصغير / تصغير مشروعك

حل لإصلاح "ng serve --prod" باستخدام "angular-cli 1.0.0-beta.11-webpack.2 - RC5"

حسنًا ، لقد اكتشفت أخيرًا طريقة عن طريق تغيير الملف مباشرة في مجلد node_modules ، لكني أتخيل أن هناك مكانًا أفضل للقيام بذلك في مشروعي. شكرا mikeeus على الإعداد.

@ herlon214 - إنه يعمل بشكل جيد مع

rickove في الوقت الحالي لا أستخدم angular-cli للبناء للإنتاج (أي لا أستخدم ng build -prod) لأنه ، كما ناقشنا هنا ، يكسر التطبيق. لا يمكنني العثور على أي مكان حيث يمكنك تعيين خيارات التصغير ، أي mangle = false.

في الوقت الحالي ، أنا أستخدم angular-cli فقط في وضع التطوير (وهذا له مشاكل أيضًا لأن حزمة الويب لا يبدو أنها تنتج خرائط مصدر جيدة والتي تتسبب في إحداث فوضى في نقاط التوقف). في حال احتجت إلى بناء إنتاج ، فأنا كذلك
1) القيام ببناء التنمية (بناء نانوغرام) ثم
2) تصغير النتائج وتسلسلها باستخدام gulp-uglify مع تعيين خيار mangle على false
return gulp.src(files) .pipe(concat("main.bundle.min.js")) .pipe(uglify({ mangle: false })) .pipe(gulp.dest("./some/location/js"));

أتطلع إلى البناء التالي حيث تم إصلاح ذلك.

تحديث: لم أشاهد حلricklove أعلاه تحرير تهيئة حزمة الويب عند نشر هذا. يعمل حله ، تجاهل هذا.

nukuuk ، انظر آخر مشاركة لي ، يبدو أنه يعمل من أجلي لبناء prod ، على الأقل يقلل حجم الملف إلى درجة كبيرة

لا يوجد حل للإبقاء على "keep_fnames" معطلة؟ :( لقد زاد ملف البناء الخاص بي في حوالي 400 كيلو بايت

يتم العمل على هذا من قبل فريق نانوغرام لإصلاح. هذا حل بديل حتى تظل البنيات الخاصة بك تعمل.

@ herlon214 على الأرجح هذا حل مؤقت في المقام الأول. لدي انطباع في وقت مبكر من الموضوع أن هناك حلًا أعمق ممكنًا يجعله غير ضروري بعد الآن. أيضًا ، من الواضح أنه ليس من الضروري بالفعل إذا كنت تستخدم النموذج المترجم المسبق ... ولكن القيام بذلك صعب نوعًا ما في الوقت الحالي ، فلا يوجد سوى القليل جدًا حتى الآن فيما يتعلق بأمثلة العمل ، والدعم من CLI في الطريق ولكن ليس هنا ، إلخ.

لذا في الوقت الحالي ، الشيء الواضح هو أن تلوح بيديك وتتظاهر بأن 400 كيلو بايت الإضافية غير موجودة ، لأنها مؤقتة. :-)

ricklove أنت عبقري! إنه يعمل ، تصميمات الإنتاج الخاصة بي الآن ضئيلة ومشذبة. تشكرات!

شكرًا على الشرح TheLarkInn ، @ kylecordes : ابتسامة:

nukuuk إذا كان 1 نحيفًا وأنيقًا :) لكي نكون منصفين مع gzip ، فإنه ينقصني إلى حوالي 250 كيلو بايت ، وهو في الواقع ليس سيئًا بالنسبة لمنتجع صحي. من المؤكد أنه يتفوق على 3 ميغا بايت وهذا أمر مؤكد ويمكنني التعايش مع هذه النتائج في الوقت الحالي.

رفاق ، هل واجه أي منكم مشكلة مع gzip؟ أخشى استخدام ملفات gzip و
بعض عملائي يستخدمون متصفحًا لا يقبل

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

nukuuk https://github.com/nukuuk إذا كان 1 ميجابايت يعتبر
كن عادلاً مع gzip ، ينخفض ​​حجمي إلى حوالي 250 كيلو بايت ، وهو في الواقع ليس كذلك
سيء لمنتجع صحي. من المؤكد أنه يتفوق على 3 ميغا بايت وهذا أمر مؤكد ويمكنني التعايش مع هؤلاء
النتائج الآن.

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/angular/angular/issues/10618#issuecomment -241064821،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ADQtMWZkEuTQR3dzArWU2oMOKVASRu7Yks5qhdjegaJpZM4JgpvN
.

_ات ، هيرلون اغيار_

مرحبًا يا رفاق .. أي شخص لا يستخدم gulp minify ويستخدم منشئ js النظام ، جرب هذا في ملف تكوين gulp .. عمل لي:

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

أرى هذا أيضًا باستخدام Webpack والمكوّن الإضافي "webpack.optimize.UglifyJsPlugin () الجديد". كما اقترح antonybudianto ، فإن طلب إعلانات الوحدة الخاصة بي طوبولوجيًا يعد حلاً صالحًا في الوقت الحالي.

متحمس لرؤية هذا واحد ثابت!

حاولت إعادة ترتيب التصريحات لكن ذلك لم ينجح معي. إضافة moduleId: module.id في معظم مكوناتي إلا أنها تعمل مثل السحر. مجد لك سيدي.

نتطلع إلى الإصلاح.

كيف يتم كسر شيء كهذا ولا يزال يتم إصداره في RC5؟

التجميع والتصغير ليسا شيئًا جديدًا ، إنهما جزء أساسي وأساسي من نظام JavaScript البيئي. واجهت عملية التجميع والتصغير داخل Angular 2 الكثير من المشكلات من قبل - كانت أكثر عذرًا عندما كانت Alpha أو Beta وربما في المرات الأولى التي حدثت فيها.

بالتأكيد يجب أن يشتمل نظام الاختبار والإصدار على بعض الاختبارات التي تتضمن بعض التجميع والتصغير؟

بالنسبة إلى وجهة نظر CaptainCodeman ، من

ولكن مع ذلك ، هل سيكون هناك أي مُجمِّعين ، ومجمِّعات ، ومُصغرات (إلخ) مدعومة رسميًا مثل SystemJS و Webpack التي ستشتمل على مجموعة كبيرة من الاختبارات وجهود التطوير التي تركز عليها؟ هل سيتمكن أي شخص في فريق Angular من إضافة قائمة بالأدوات المتوافقة المدعومة بقوة في وثائقهم؟ الفكرة هي أنه إذا تم إدراج أداة في المستندات ، فمن المتوقع أن تعمل ، وإلا استخدمها على مسؤوليتك الخاصة (مثل مفتوح المصدر).

شكرا،
آدم

اهلا ياجماعة،

فقط لإضافة ملاحظة صغيرة هنا ، قمت بتعطيل خيار mangle و UglifyJsPlugin () بالكامل. لكنه لا يزال يكسر أجهزة التوجيه.

على سبيل المثال ، إذا كنت أرغب في الانتقال إلى localhost:3000/company وإذا كان لديّ إعادة توجيه افتراضية مثل {path: '', redirectTo: '/company', pathMatch:'full'} فإن هذا يعمل ، ولكن إذا حاولت الانتقال مباشرة إلى localhost: 3000 / عنوان url "Get /company" Error (404): "Not found" ). ولا يمكن تحميل أي مسار آخر (المسارات الفرعية من / تعمل الشركة ، ولكن المسارات على نفس المستوى). سأحاول حل AOT ونشر تعليقي هنا لاحقًا.

ShankarSumanth أعتقد أنك قد تحتاج إلى HashLocationStrategy في مزود الوحدة الخاصة بك

جربت الاقتراحات في الموضوع. لا يزال يحصل على:

"لا يمكن الربط بـ" الرمز "نظرًا لأنه ليس خاصية معروفة لـ" الزر ". ("ver": hovered، 'ui-state-focus': focus، 'ui-state-disabled': disabled} "

] [icon] = "icon" pButton * ngIf = "showIcon" (النقر) = "onButtonClick ($ event، in)"[ngClass] = "): التقويم @ 7 : 31 ؛ المنطقة:؛ القيمة: BaseException {message: "أخطاء تحليل القالب: ↵ لا يمكن الارتباط بـ 'icon' منذ ... في)" ↵ [ngClass] = "): Calendar @ 7 : 31" ، المكدس: "خطأ: أخطاء تحليل القالب: ↵ يتعذر الارتباط بـ 'icon' ... odules / zone.js / dist / zone.js؟ 1472035648186: 365: 38) "} خطأ: أخطاء تحليل القالب:لا يمكن الارتباط بـ "icon" لأنها ليست خاصية معروفة لـ "button".
] [icon] = "icon" pButton * ngIf = "showIcon" (النقر) = "onButtonClick ($ event، in)"[ngClass] = "): التقويم @ 7 : 31
في BaseException الجديد (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 5116: 27)
في TemplateParser.parse (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 8318: 23)
في RuntimeCompiler._compileTemplate (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 15941: 55)
في EVAL (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 15869: 87)
في Set.forEach (أصلي)
في التحويل البرمجي (http: // localhost: 5555/node_modules/@angular/compiler/bundles/compiler.umd.js: 15869: 51)
في ZoneDelegate.invoke (http: // localhost: 5555 / node_modules / zone.js / dist / zone.js؟ 1472035648186: 332: 29)
في Zone.run (http: // localhost: 5555 / node_modules / zone.js / dist / zone.js؟ 1472035648186: 225: 44)
على http: // localhost : 5555 / node_modules / zone.js / dist / zone.js؟ 1472035648186: 591:58
في ZoneDelegate.invokeTask (http: // localhost: 5555 / node_modules / zone.js / dist / zone.js؟ 1472035648186: 365: 38) consoleError @ zone.js؟ 1472035648186: 484_loop_1 @ zone.js؟ .js؟ 1472035648186: 515ZoneTask.invoke @ zone.js؟ 1472035648186: 437

ahuvafischer كان لدي نفس المشكلة ، وكان الحل الوحيد الذي نجح معي هو أنه كان عليّ إدراج جميع المكونات في @NgModule في app.module. كلما أضفت وحدتين B و C أخريين ، استورد B و C إلى تطبيقي.

bahodirk ماذا عن وحدات الطرف الثالث؟

ahuvafischer ما زلت
<script src="../node_modules/moment/min/moment-with-locales.min.js"></script>

مع ES5 إذا كانت الإعلانات بترتيب "خاطئ" ، فلن يتم عرض بعض المكونات ببساطة ، دون أي أخطاء. Plunk :

إذا لم يتم إصلاح ذلك لـ 2.0.0 ، فمن الأفضل أن نقول أن Angular 2 لا يدعم ES5 ، الفترة.

لا أعتقد أنني أقوم بتصغير الحزمة ، لكنني قمت للتو بترقية مشروع صغير إلى RC5 وأتلقى نفس الأخطاء. لقد قمت بتحديث node_modules/@angular/compiler/src/url_resolver.js هكذا وتم إصلاح الخطأ الفوري بالنسبة لي ..

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

كان الخطأ أنه في وقت ما ، uri == 114 ولم يكن سلسلة. عندما أضفت الكود أعلاه ، تم إصلاحه حتى الآن.

حسنًا ، الآن بما أنني أستخدم uglify مع مجموعة mangle: {screw_ie8 : true, keep_fnames: true } ، لست متأكدًا من أنني بحاجة إلى تصحيح node_modules/@angular/compiler/src/url_resolver.js بعد الآن ..

تحديث:

كلا ، ما زلت بحاجة إليه لأن ما يتم تمريره على أنه معرف الوحدة لا يزال عددًا صحيحًا 114 وليس سلسلة.
var scheme = url_resolver_1.getUrlScheme(moduleId);

تم حل مشكلة تصغير اسم الوظيفة بواسطة 51877ef4ed5016bd0c57f35e7bbb1ee26511ab5d ، بمجرد خروج rc.6 ، لن يكون من الضروري إخبار uglify بعدم تشويش أسماء الوظائف.

ما زلت أواجه نفس المشكلة مع angular-2.rc6 مع webpack2 ،
عندما استخدمت mangle: false ؛ في تكوين حزمة الويب الخاصة بي
تغير الخطأ من
t.match is not a function
إلى
uri.match is not a function
لقد فتحت مشكلة في angular2-webpack-starter
https://github.com/AngularClass/angular2-webpack-starter/issues/958

eslammostafa هذه ليست مشكلة مصغرة ، تتعلق بهذا: https://github.com/angular/angular/issues/10626. في الأساس ، يمكنك إما إزالة أي مراجع module.id من المكتبات الأساسية أو مكتبات الجهات الخارجية ، أو استخدام أداة التحميل المسبق لـ string-replace-loader في حزمة الويب التي تجردها ، أو استخدام NamedModulesPlugin إذا كنت تستخدم أحدث إصدار من webpack 2 أو يدويًا ضع .toString () في الجزء الذي يسبب الخطأ في مجلد node_modules.

ricklove شكرًا لك على الاقتراح ، الذي

للاخرين:

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

تحرير mangle: { screw_ie8 : true }, //prod إلى mangle: { screw_ie8 : true, keep_fnames:true }, //prod

ng build -prod

يتمتع!

ricklove لقد قمت بالترقية إلى أحدث إصدارات Angular 2.0.0 و Angular CLI 1.0.0-beta.14 لكن أسلوب التحرير لا يعمل.

يوجد ملف webpack-build-production.ts في موقع مختلف. يبدو الآن أنه في ؛

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

عندما أقوم بتحرير هذا الملف وتغييره ليشمل keep_ fnames: صحيح ، ما زلت أحصل على الخطأ ...

`` لا يمكن الربط بـ 'customerNumber' لأنها ليست خاصية معروفة لـ 'channel-details-panel'.

1. إذا كانت "channel-details-panel" مكونًا زاوية ولها إدخال "customerNumber" ، فتأكد من أنها جزء من هذه الوحدة.
2. إذا كانت "channel-details-panel" أحد مكونات الويب ، فقم بإضافة "CUSTOM_ELEMENTS_SCHEMA" إلى "@ NgModule.schema" لهذا المكون لمنع هذه الرسالة.
   ("nnel-details-panel * ngFor =" دع قناة channelList.results "
   [خطأ ->] [customerNumber] = "customerNumber"
   [channelModel] = "قناة">
   "): ChannelManagementComponent @ 10 :38`

لقد قارنت ملفي main.xxxx.bundle.js مع وبدون هذا الحل البديل وهما مختلفان. واحد مع الحل البديل حوالي 1.47 ميغا بايت والآخر بدون تغيير حوالي 1.32 ميغا بايت.

أرى أن هذه المشكلة قد تم إغلاقها و "تضمينها" في الإصدار 2.0.1 من Angular ولكن لا يمكنني تحديد ما تم تغييره بالفعل.

لقد جربت أيضًا عددًا من التركيبات المختلفة مع ترتيب الإعلانات ولكن ما زلت أحصل على المشكلة.

ما هي إصدارات Angular و Angular CLI التي يستخدمها الأشخاص والتي تعمل فيها طريقة تحرير mangle ؟؟

أي مساعدة سيكون محل تقدير كبير :-)

[تحديث] - لقد رأيت للتو تعليق IgorMinar حول 51877ef لإصلاح هذه المشكلة في rc.6 لكني أستخدم الإصدار 2.0.0 ولا يزال يبدو أنه يمثل مشكلة.

[ستجد حلا] - Ack ، خطأي. أعتقد أن مشكلتي الفعلية كانت أن إعلان المحدد الخاص بي في المكون الفرعي "لوحة تفاصيل القناة" لم يكن صحيحًا ، فقد تم تعيينه على "app-channel-details-panel" عندما كان يجب أن يكون فقط "تفاصيل القناة- لوحة "- لذا كان الخطأ صحيحًا ، ولكن لم يتم شرح الأشياء جيدًا.

أعتقد أن هذه المشكلة تعمل بشكل صحيح الآن في Angular 2.0.0 + Angular CLI 1.0.0-beta.14 بدون حل بديل التحرير. فقط تأكد من صحة تصريحات المحدد.

رؤية نفس المشكلة. أنا أستخدم webpack intro الموجود على angular.io. إنه يعمل بشكل جيد عندما يكون مدمجًا في وضع dev ، ومع ذلك ، عند تضمينه في وضع prod ، يبدو أن عملية uglify تكسرها. لقد حاولت تبديل ترتيب الإعلانات في وحدة التطبيق الخاصة بي كما هو مقترح أعلاه ، وأرى الآن أخطاء تتعلق بمكونات Angular المبنية (انظر أدناه) ، لذا فإن ترتيب الإعلانات عشوائيًا لا يعالج هذا الأمر.

إنني في حيرة من أمري بسبب هذا النوع من الأخطاء ، وآمل أن يدرك فريق Angular هذه الأنواع من التغييرات ، حيث يمكن بسهولة إضاعة عدة ساعات في هذه الأنواع من الأخطاء. هي موضع تقدير أي اقتراحات. شكرا!

لا يمكن الارتباط بـ "routerlink" لأنه ليس خاصية معروفة لـ "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
لا يمكن الارتباط بـ "ngif" لأنها ليست خاصية معروفة لـ "a".

mchamo أليس * ngIf الخاص بك خاطئ؟ انها ليست * ngif - انها * ngIf برأس مال I.

مرحبًا rperfect ، كما وصفت في رسالتي أعلاه ، كل شيء يعمل بشكل جيد عند تشغيل عملية إنشاء التطبيق في وضع dev. أيضًا ، كانت رسالة الخطأ الأصلية الخاصة بي عند التشغيل في وضع إنشاء المنتج مطابقة للأخطاء الموجودة في بداية سلسلة الرسائل هذه. بعد تبديل ترتيب الإعلانات ، بما في ذلك تغيير إعلان AppComponent ، كما اقترحت بعض المنشورات الأخرى في هذا الموضوع ، بدأت في رؤية مشكلة ngIf. بالرجوع إلى قائمة التصريحات الأصلية ، أعود إلى رسالة الخطأ الأصلية. يبدو أن السبب الجذري للمشكلة هو عملية uglify مع بناء حزمة الويب. بالعودة إلى الإصدار غير المقيد ، أي ، إنشاء المطورين ، كل شيء يعمل بشكل جيد. ومع ذلك ، يبلغ حجم الصفحة حوالي 2 ميغا بايت ، ومن هنا الرغبة في تصغيرها.

mchamo لديك على الأرجح htmlLoader ، تأكد من تعيينه على هذا النحو:

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

@ princemaple شكرًا على الاقتراح ، ولا يزال يتم

zone.js؟ fad3: 355 رفض الوعد غير المعالج: أخطاء تحليل القالب:
لا يمكن الارتباط بـ "appname" لأنه ليس خاصية معروفة لـ "app-nav".

1. إذا كان "app-nav" مكونًا Angular ويحتوي على إدخال "appname" ، فتأكد من أنه جزء من هذه الوحدة.
2. إذا كان "app-nav" أحد مكونات الويب ، فقم بإضافة "CUSTOM_ELEMENTS_SCHEMA" إلى "@ NgModule.schema" لهذا المكون لمنع هذه الرسالة.

mchamo الشيء الوحيد الذي تحتاجه هو:

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

@ Martin-Wegner ، أنت محق ، هذا كل ما هو مطلوب ، وكان ذلك في مستندات مقدمة Angular.io webpack. لقد حللت مشكلتي في وقت متأخر من الليلة الماضية.

بالنسبة لجميع الآخرين ، واجهت هذه المشكلة لأنني كنت أشير إلى ملفات js المجمعة / المصغرة التي تضعها حزمة الويب في مجلد dist لـ pollyfills والمورد والتطبيق من index.html الأصلي (خارج مجلد dist). كنت أفعل ذلك لأنني قمت بالفعل بتكوين موقعي في IIS ، والتوجيه ، وإعادة كتابة عنوان URL لـ IIS لاستخدام index.html الأصلي. كان هذا يعمل بشكل جيد لبناء حزمة الويب dev ، ولكن ليس بناء prod.

لكي يعمل هذا ، كنت بحاجة بدلاً من ذلك إلى الاعتماد على index.html الذي تنشئه حزمة الويب في مجلد dist. وبالتالي ، كان علي تحديث إعدادات IIS الخاصة بي ، وإعدادات إعادة كتابة عنوان URL ، والتوجيه لاستخدام ملف dist / index.html. بمجرد الانتهاء من ذلك ، يعمل كل شيء بشكل جيد ، ولا يتم إلقاء أي أخطاء في إنشاء webpack prod.

واجهت نفس المشكلة في الإصدار الأحدث Angular2 v2.0.2 في DEV. والسبب في ذلك هو أنه لم يتم التصريح عن المكون الخاص بي في app.module ، ولكنه أراد استخدام تبعيات app.module. نقله إلى وحدة المستوى الأعلى أدى إلى إصلاح المشكلة.

أنا أستخدم Angular 2 في تطبيق aspnet core ... مما يعني أن النشر على aws يتضمن استوديو مرئي ... مما يعني أنني أستخدم عداء مهام الاستوديو المرئي لتشغيل حزمة الويب ... مما يعني أنني مقفل إلى "webpack -p" حيث يبني الأمر prod ... مما يعني أن UglifyJsPlugin يعمل بالإعدادات الافتراضية وليس لدي رفاهية تمرير المعلمات مثل keep_fnames: true.
هل هناك أي طريقة أخرى للتغلب على هذا؟

jrood ، يجب أن تكون قادرًا على تكوين هذا الإعداد في ملف التكوين webpack.prod الخاص بك.

machmo لسوء الحظ ، حتى لو أضفت صراحة "new webpack.optimize.UglifyJsPlugin ({mangle: {keep_fnames: true}})" إلى قائمة المكونات الإضافية ، يتم تجاوزها من خلال ذلك الذي لا يحتوي على معلمات تم إنشاؤها بواسطة العلامة -p.

اتضح أن مشكلتي كانت سببها في الواقع webpack.optimize.OccurrenceOrderPlugin (يقول webpack -h أن -p يفعل فقط - التحسين - التصغير ، لكن المستندات عبر الإنترنت تؤكد أنه يفعل أيضًا - تحسين ترتيب التكرار) ؛

أواجه نفس المشكلة حتى أنني قمت بالفعل بتضمين الكود التالي في webpack.config كما هو موضح في angular.io

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

يستخدم مشروعي الذي يستخدم ASP.NET MVC 4 و Angular 2 لواحد من العديد من تطبيقات الصفحة الفردية التي نمتلكها حاليًا.

الخطأ الذي أواجهه الآن هو أثناء عملية uglify ، أصبح ngModel ngmodel (الأحرف الصغيرة)

zone.js: 388 رفض الوعد غير المعالج: أخطاء تحليل القالب:
لا يمكن الارتباط بـ "ngmodel" لأنها ليست خاصية معروفة لـ "المدخلات". ("olumn-main-map>

@ 0 : 313
لا يمكن الارتباط بـ "ngif" لأنها ليست خاصية معروفة لـ "div". ("$ event) /> إظهار حركة المرور

@ trungk18 أعتقد أنه يجب عليك أيضًا تكوين مُحمل html الخاص بك. جرب هذا:

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

هذا الحل هو من تكوين إنتاج Webpack في Angular docs .

@ tasos-ale تحقق من htmlmin أو أي أداة تحميل أخرى. يبدو أنها سمات صغيرة في ملفات html

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

يبدو أن هذا يفعل الحيلة بالنسبة لي.

يبدو html-loader بعض الخيارات caseSensitive: true هو خيار مطلوب
https://github.com/webpack/html-loader/blob/master/index.js#L99

هذا لأنني لا أستخدم المكونات الإضافية التي تعالج خيارات المستخدم ، إذا لم أكن قد كتبتها)

يبدو أن هذه القضية عادت بالنسبة لي. ملاحظة ، لقد قمت بالترقية إلى Typescript 2.0.10 و Angular 2.4.0. يعمل إصدار web-pack dev بشكل جيد ، ولكن ينتج عن إنشاء حزمة الويب حدوث الخطأ. مرة أخرى ، يبدو أنه مرتبط بحساسية حالة الأحرف ، لذلك إذا كان لدي خاصية تسمى appName في المكون الخاص بي ، بعد إنشاء prod ، يبحث Angular عن appname ، وهو غير موجود ، وبالتالي ينتج عنه الخطأ. هي موضع تقدير أي اقتراحات.

هنا هو webpack.prod.js الخاص بي.

var webpack = يتطلب ('webpack') ؛
var webpackMerge = يتطلب ('webpack-merge') ؛
var ExtractTextPlugin = يتطلب ('extract-text-webpack-plugin') ؛
var commonConfig = يتطلب ('./ webpack.common.js') ؛
var helpers = يتطلب ('./ helpers') ؛

const ENV = process.env.NODE_ENV = process.env.ENV = 'إنتاج' ،

module.exports = webpackMerge (commonConfig ، {
devtool: "خريطة المصدر" ،

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 ما هو إصدار wbepack الذي تستخدمه؟

@ Martin-Wegner أستخدم ما يلي لـ webpack. يعتمد هذا على مستندات angular.io webpack

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

ليس لدي أي مشاكل مع هذا الإصدار ...

لكن لا بد لي من استخدام:

    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 لا يبدو أنه يعمل. نفس الخطأ كما ذكر من قبل.

miladchamo هل لديك مشروع جيثب صغير يوضح المشكلة؟

@ Martin-Wegner لقد حصلت على هذا للعمل. اضطررت إلى تحديث package.json للتأكد من أنني قمت بتحديث الإصدارات لجميع تبعيات المطورين. بالإضافة إلى ذلك ، اضطررت إلى تغيير هذه التبعية إلى 2.5.41 ، حتى يعمل بناء جانب العميل ، كما هو مذكور في https://github.com/angular/angular.io/issues/3198

• "@ types / jasmine": "^ 2.5.35"،
• "@ أنواع / ياسمين": "2.5.41"،

شكرا لمساعدتك على طول الطريق. ومع ذلك ، ما زلت قلقًا بشأن كيفية تأثير الإصدارات الثانوية في هذه التبعيات بشكل كبير ، ويبدو أن مستندات angular.io لـ webpack و angular https://angular.io/docs/ts/latest/guide /webpack.html لا يتم تحديثه بالكامل أو لا يتم اختباره بالكامل. هذه هي المرة الثانية التي أواجه فيها مشكلة عند متابعتهم.

يعمل الكود الخاص بي بشكل مثالي في بيئة التطوير عندما أحاول npm run build أحصل على الخطأ التالي:

خطأ في ./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
فشل بناء الوحدة:
.all-common-grid {
^
CSS غير صالح بعد "e": محدد واحد أو قاعدة متوقعة ، كان "export = module.ex"
في D: devGraduate_GivingCommunicationsCentersrcappcomminction-centercomm-center.component.scss (السطر 1 ، العمود 1)
@ ./src/app/comminction-center/comm-center.component.scss 2:21-317
@ ./src/app/comm Communication-center/comm-center.component.ts
@ ./src/app/comm Communication-center/comm-center.module.ts
@ ./src/app/app-routing.module.ts
@ ./src/app/app.module.ts
@ ./src/app/main.ts

خطأ في ./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 / articles / style.scss
فشل بناء الوحدة:
/ * ورقة أنماط مستوردة * /
^
CSS غير صالح بعد "e": محدد واحد أو قاعدة متوقعة ، كان "export = module.ex"
في D: devGraduate_GivingCommunicationsCentersrcassetsstyle.scss (السطر 1 ، العمود 1)
@ ./src/assets/style.scss 2: 21-286

فيما يلي رمز بلدي

webpack.config.common.js

var HtmlWebpackPlugin = يتطلب ('html-webpack-plugin') ؛
var ExtractTextPlugin = يتطلب ('extract-text-webpack-plugin') ؛
var CopyWebpackPlugin = يتطلب ('copy-webpack-plugin') ؛
var helpers = يتطلب ('./ helpers') ؛
var webpack = يتطلب ('webpack') ؛

module.exports = {
الدخول: {
"التطبيق": "./src/app/main.ts" ،
"polyfills": "./src/polyfills.ts"،
"الأنماط": "./src/assets/style.scss"
} ،
حل: {
الامتدادات: ['.ts'، '.js']
} ،
وحدة: {
قواعد: [
{
الاختبار: /.ts$/ ،
استعمال: [
{
مُحمِّل: "awesome-typescript-loader" ،
والخيارات: {
transpileOnly: صحيح
}
} ،
{لودر: 'angular2-template-loader'}،
{لودر: 'angular-router-loader'}
]
} ،
{
الاختبار: /.html$/ ،
لوادر: ['html-loader']
} ،
{
الاختبار: /.scss$/ ،
استبعاد: [/ node_modules /، helpers.root ('src'، 'style.scss')]،
استخدم: ['to-string-loader'، 'css-loader'، 'sass-loader']
} ،
{
الاختبار: /.scss$/ ،
استخدم: ExtractTextPlugin.extract ({
استخدم: 'css-loader! sass-loader'
})
} ،
{
اختبار: /.
استخدم: 'file-loader؟ name = Assets / [name]. [hash]. [ext]'
}
] ،
exprContextCritical: خطأ
} ،
المكونات الإضافية: [
ExtractTextPlugin الجديد ({// تحديد مكان حفظ الملف
اسم الملف: 'styles / [name] .bundle.css' ،
allChunks: صحيح ،
}) ،
HtmlWebpackPlugin الجديد ({
النموذج: "src / index.html"
}) ،
CopyWebpackPlugin الجديد ([
{
من: 'node_modules / froala-editor / css /'،
to: 'الأصول / froala-editor / css /'،
} ،
{
من: 'node_modules / font-awesome / css / font-awesome.min.css' ،
إلى: "الأصول / font-awesome / css / font-awesome.min.css" ،
} ،
{
من: "node_modules / font-awesome / Fonts" ،
إلى: "الأصول / الخطوط الرائعة / الخطوط"
}
]) ،
حزمة ويب جديدة .ProvidePlugin ({
$: "jquery"،
jQuery: "jquery"
})
]
} ؛

webpack.config.prod.js
var path = يتطلب ('path') ؛
var webpack = يتطلب ('webpack') ؛
var webpackMerge = يتطلب ('webpack-merge') ؛
var commonConfig = يتطلب ('./ webpack.config.common') ؛
var ExtractTextPlugin = يتطلب ('extract-text-webpack-plugin') ؛
var UglifyJSPlugin = يتطلب ('uglifyjs-webpack-plugin') ؛

const ENV = process.env.NODE_ENV = process.env.ENV = 'إنتاج' ،

module.exports = webpackMerge (commonConfig ، {
انتاج: {
المسار: path.resolve (__ dirname، 'dist') ،
publicPath: '/'،
اسم الملف: '[الاسم]. [التجزئة] .js' ،
chunkFilename: '[id]. [hash] .chunk.js'
} ،
المكونات الإضافية: [
حزمة ويب جديدة. NoEmitOnErrorsPlugin () ،
new webpack.optimize.UglifyJsPlugin ({
تلف: {
keep_fnames: صحيح
}
}) ،
ExtractTextPlugin الجديد ("الأنماط. [التجزئة] .css") ،
حزمة ويب جديدة.DefinePlugin ({
"process.env": {
"ENV": JSON.stringify (ENV)
}
}) ،
webpack.LoaderOptionsPlugin الجديد ({
والخيارات: {
htmlLoader: {
تقليل: خطأ // الحل البديل لـ ng2
}
}
}) ،
جديد UglifyJSPlugin ()
]
}) ؛

تضمين التغريدة

أحصل على نفس المشكلة في 7.0.2

حسنًا ، لقد واجهت نفس المشكلة عند استخدام على سبيل المثال "import {TooltipModule} من" ngx-bootstrap / tooltip "؛ ' على تطبيقي. لذلك كانت مشكلتي أنني لم أقم بتضمين هذه الوحدة في ملف ts.spec للمكون الذي يتحدث عنه الخطأ. بعد إضافته إلى ملف ts.spec كعملية استيراد ، بدأ الوهمية في فهم ماهية وحدة تلميح الأدوات. أتمنى أن يساعدك هذا.

تم قفل هذه المشكلة تلقائيًا بسبب عدم النشاط.
يرجى تقديم مشكلة جديدة إذا كنت تواجه مشكلة مشابهة أو ذات صلة.

اقرأ المزيد حول سياسة قفل المحادثة التلقائي .

_{_تم تنفيذ هذا الإجراء تلقائيًا بواسطة روبوت.}